So we created the action creator,
let's now connect it to our contact data container.
There we have the orderHandler method
and I will leave it here because I still need it,
it should be executed when we clicked the order button. But I no longer want to handle loading here so
I will remove setState loading there and I no longer want to actually do the order here,
I already stripped out the code to reach out to axios. What I do want to do,
I want to leave the axios
imput here, import here
and I actually didn't do something else before,
I want to import withErrorHandler, that higher order component from my higher order component folder,
I don't need to do that it's not related to redux but I want to make sure that I do use it here
too just as I use it in the burger builder at the bottom, it's getting wrapped by the connect middleware
and I want to have this error dropdown here too.
So in contact data at the very bottom where I export everything, I'll wrap contact data with one additional
higher order component, my withErrorHandler higher order component where I don't only pass contact data
but also axios, that's just a tiny thing.
The main thing is that I want to connect my container here to the new actions I created and for that,
I need to connect myself to the dispatchable actions,
so I'll add a constant mapDispatchToProps, we didn't have that before
and here, I now have one property I want to create, onOrderBurger or any name you like. There,
I'll execute an anonymous function where I in the end dispatch my action creator, the action creator
I added in the order file, purchaseBurgerStart.
That is the action creator
I want to import in my index.js file in the actions folder so that I can reach it from other files
and that other file I want to reach it from is the contact data container,
there, I'll now import it. So I'll import everything as actions from
and now I'll move all the way up to store actions there
in the index.js file.
And with that, I can dispatch at the bottom of the contact data container,
I can dispatch actions and then here, it's purchaseBurgerStart. Now I do expect to get an argument
here,
the order data,
so I get it into my anonymous function and I pass it on to that action creator because I do actually
expect that data here in the action creator. Now in contact data,
I of course also want to use this property.
So onOrderBurger should be called in the orderBurgerHandler,
let's scroll up to the orderHandler and there, we prepare the order data,
now we can execute this.props,
remember we always receive our dispatch actions here as props, onOrderBurger
and there I want to pass my order
and this contains the ingredients, the price and here, order data is simply the detailed order data the user entered
into the form.
With that, we are able to dispatch this on a click but there are a couple of things which won't work as
expected anymore.
For example, in the render method of the contact data component here, we check if we are loading to eventually
display a spinner if we are instead of the form.
Now we are loading
if we clicked the order button. We need to handle that loading state in our redux store
therefore, because we put the whole process of ordering into redux. To be able to do, so we need to work
on the reducer which is pretty empty right now.
So that's the next goal,
let's work on that order reducer.