Now that we're handling everything related to ingredients through redux,
we of course should also adjust the other components where we use that ingredient data, namely check
out and contact data, especially checkout and contact data are super great now that we use redux
because thus far, we used query params to pass our ingredients to the checkout component,
this is something we finally can get rid of.
So in the burger builder component where we do pass our ingredients through query params here,
purchaseContinueHandler, we no longer need to do that,
we can simply remove this method.
Instead we need to handle this through redux
now, we probably still want to navigate on but I don't want to pass query params anymore. So I can get
rid of all that query params code here and I can also make this push method a bit shorter now and just
go to /checkout here and we can then simply get the ingredients from the redux store.
So our purchaseContinueHandler lives on in the burger builder but it's much leaner and in the check
out container,
we no longer need to get our ingredients in componentWillMount like this.
Instead we can get rid of componentWillMount here altogether,
we can get rid of our state which only handles ingredients and price,
we got that in redux, and we can now import connect from react-redux again because obviously we want
to connect this container with redux too.
So if we go down to the bottom of the checkout container, I'll again create a constant, mapStateToProps
and there, I still have a function which gets the state and in the end returns a javascript object
where we map well, our state stored in redux store to the props of this container. And there we could
have our ings property too,
you can name it whatever you want though and this should hold state ingredients,
this can not be named whatever you want,
this has to be the property as you name it in your state.
So as in our reducer ingredients and of course we also need the price here,
so let's fetch the price which is state.totalPrice,
that's the property name we use in the reducer.
Now we don't need mapDispatchToProps here because we're not actually dispatching anything in this
container, we just navigate a little bit but we don't do this through redux store, we do this through the
react router
so there is nothing getting dispatched here,
so for now we only need mapStateToProps, I then wrap this with connect
and here, I pass mapStateToProps as the first argument and simply omit the second one since we don't
have a mapDispatchToProps data field we want to pass on.
By the way, if you only had mapDispatchToProps and no mapStateToProps, you simply would set
mapStateToProps to null and pass mapDispatchToProps because mapDispatchToProps always has to be the
second argument, mapStateToProps has to be the first one.
So the first one is not necessary, simply set it to null, here however the first one is the only one
we're interested,
we're just needing mapStateToProps. With that, we got ingredients and price available through props
in this component,
let's use it.
So there whenever we access this.state.ingredients, this is now this.props.ings,
and when we use the price, well this is now
this.props.price, though
we only really need it down here where we use our little trick for loading the contact data.
Now thanks to our redux store, we no longer need to use the tricks so we don't actually even need the
price here because we don't use it anywhere else in this component.
So let's get rid of this price prop here in mapStateToProps and let's get rid of the render method
here
and instead just set a component we want to load and that should be our contact data components still
but now not included as a jsx component but just by pointing to it on the component property of the route.
With that we also need to adjust our contact data of course because in there as you know, we also use
the ingredients which we get on props and the price. Prior to redux,
we got it with this little trick we just removed,
now we can simply connect this container here to redux as well.
So for that, in the contact data container, let's also import connect from react-redux and all the way
at the bottom, let's create mapStateToProps here tOo, assign the function which receives the state
and return our object where we map the relevant state we need in this component to props and there, I
want to get my audience on state.ingredients and my price on state.totalPrice
was the name. And then as before,
let's wrap this with connect, pass
mapStateToProps and omit the second argument because we're not dispatching anything here either
and then pass connect data to the function returnd by the connect function.
Now of course, we need to update this component too, wherever we use the this.props.ingredients,
we can now use this.props.ings, of course the quickest possible update would be to simply use ingredients
here as a prop name because that's the name we already use
but to avoid confusion with these ingredients we get from the state, I chose to use a different name.
So now in the contact data,
let's update everything which uses these props. We got the order form,
it definitely doesn't require updating and it takes up most of the place in this file.
The order handler here,
let's have a look,
we take a lot of information from our form and here we pass on props.ingredients,
this should be props.ings,
props.price still is correct because we still map that to a price property in mapStateToProps.
So we don't need to replace this,
it will already refer to a redux store though, just as we do for the ingredients,
so let's continue. Everything else here looks good to me
and all our input validation looks good to me,
the inputChangedHandler also shouldn't be related to our ingredients or the price at all
and in the render method here,
we also simply just take care about our form where we don't really care about any ingredients or the
price, so that's all just form related,
that's the reason why this container is as big as it is.
So the information we need should be there,
let's now try everything out and let's see if it works as it should work.
Make sure to save all files,
go back to your application,
build an example burger here,
click
order now,
the summary looks good.
Let's click continue,
that looks good too,
let's click continue,
let's enter some dummy data here,
so this all works fine.
Click order and we were redirected here,
let's now also check firebase, there in your database
on orders,
you should see the order you just placed,
this is the order. So that all works, we're passing around our redux state successfully, now
without any fancy tricks, really taking advantage of redux
and this also hopefully shows where redux shines.
This is not a super huge application but it is a bit more advanced than just having a To-Do list
and here, we really make it much easier to ourselves
if we use redux. We have a predictable data flow and we make passing data around in our application
super super simple.