We can load the ingredients from the server and build the burger,
let's now work on the checkout process. There
when we enter all that contact data, I want to make sure that once we have a valid contact form and we
click that order button, we do of course submit that order and we do of course store that order on
the firebase server
but I want to handle more of that
via redux.
If we have a look at the checkout container, there we don't do anything related to the checkout because we
first of all load the contact data component or container. And in the contact data container,
it's a very big container because we do all these state management of the form here,
there we have that orderHandler where ultimately we reach out to our backend. This is now what I want to handle in
the action creator so that we actually create our order in there and automatically add it to our store.
So let's start working on this
and let's first of all define some action types.
If we have a look at the contact data container, we can actually split this up in a couple of actions
we probably want to dispatch,
we want to start submitting this.
So something like try purchase or try complete order but then, we also need actions for the success
case and for the failure where we might want to set up some error
or simply set loading to false if we don't want to do anything with the error. So these three action
types probably makes sense,
so back in the action types file, I'll export a couple of constants here and the first one is actually
PURCHASE_BURGER_SUCCESS and of course, a similarly named string here or a similar value for the string
and PURCHASE_BURGER_FAIL
and this will be the actual dispatch
if it fails. I don't have my try purchase action here because we don't need an identifier for that,
it will only be action creator we execute to run some async code,
it will never be an action we dispatch to reducer due to the async code.
So let's head over to the order.js file then, in the actions folder and there, I'll first of all import
my action types from ./actionTypes and then I want to export some handlers here, some action creators.
The first one will be
and we can orientate ourselves on the action types PURCHASE_BURGER_SUCCESS,
so here, I'll name this purchaseBurgerSuccess in camel case notation. Here,
I expect to get the id of the newly created order
so the order which was created on the backend, on the database on our backend, I expect to get this
as an id here because I want to pass it on in the action which I actually create here so that in the reducer,
we can use that action to actually add the order to our orders array and maybe, I need even more than
the ID, mayb I also want to have to order data
so I'll pass our order data object too. Then I return object where I have a type, type should be action types
and then purchaseBurgerSuccess then I'll set up an order ID property which is my ID and I'll also pass
the order data property and yes, we could merge both together of course where I set order data, like this.
Now I need to add another action creator, I'll name this one purchaseBurgerFail, there
I might get the error message but then, I simply want to return a new object of type actionTypes.
PURCHASE_BURGER_FAIL and I will pass on the error since we got it.
These are the two synchronous action creators,
now comes the async one, I'll name it purchaseBurgerStart, this is the action we dispatched from the
container
once we click that order button. Here I do expect to get some order data like the user data, add ingredients
and so on
and then in this function, I will return a function where I get the dispatch function using that redux
thunk middleware where I then will reach out to axios. For that,
I'll first of all import axios from and now I need to move up to the axios orders file here,
there I'll reach out to axios, I want to post a new order,
we actually have the code in the contact data container already,
it's this code here, so I can just cut it from there and put it into my order action creator, like this.
This is the request I want to make and I want to pass my order data as an argument here,
we could of course also restructure that order data in the action creator if we need to do so,
I certainly don't want to call this.setState here
and I also won't call this.props.history.push,
we don't have access to the router here.
We could get it,
we could pass it as an argument but I'll take a different route of redirecting later.
So none of that happens, instead
once we got the response so that we were successful, I will dispatch my purchaseBurgerSuccess action
creator here.
We'll execute it of course and I'll pass the response data and see if that's the id, so let's simply log response
data here to see how we can get the id of the newly created element
and I will also pass the order data which I'll also still need,
so what did we order so that I can add this to my local store. And in the error case, I'll dispatch purchase
error burger fail, not error, purchaseBurgerFail and pass on that error object.
With that, the action creators in the order file are finished, in the next lecture,
I want to connect them to my container and make sure that ordering indeed goes through
redux.