We worked on the action creators for orders and we worked on being able to dispatch them. Now we need to manage
the order state through our reducer of course and for that, I'll go to the order file in the reducers folder
and first of all, I'll import my action types here because I need them in my switch case statement, so
I need to reach out to actions and their action types.
Next I'll create a constant which I'll name order or just reducer because it is my reducer function here in
the end and I will make this a normal reducer.
So a function which receives two inputs, the state and the action, as you learned it.
Now I want to set up an initial state for this reducer too, so I'll name that property,
that constant, excuse me initial state,
it should be a javascript object and now there,
I need a little bit of information.
I certainly want to have all my orders,
could be an array like that,
I also want to know if we are in the process of ordering or if we are done, so we can add a property
purchasing or loading and set it to false and it should be false initially, it should be set to true
once we then start ordering of course. Now the one issue we'll face immediately
is that in our order action creator,
we only handle success and fail, the start action here
doesn't actually dispatch anything we can catch in redux, we instead run some async code to dispatch
other actions which is a normal pattern but since we probably want to update our loading property in our
state when we start loading, we need an additional action we dispatch.
So that's something we should keep in mind and I'll handle in the next lecture. In this lecture here,
let's work on the actions we already have.
So in my reducer, I, before I add my switch case statement, I'll set my state equal to the initial state
so that we have a state initially and then, I'll add my switch case statement. So I'll switch my action type
and now I want to handle my different cases of course. So I'll have a case here which is action types
and then it is that
our purchase succeeded, here
I then want to return a certain state,
I'll work on this soon.
The next case is that I got actionType_PURCHASE_BURGER_FAIL, then I want to return a different state
obviously and then I got my default case where I simply want to return the current state.
This is by the way very important since we're combining a couple of reducers soon,
you of course need to be able to return something if it's an action which is handled in a different reducer.
In the end, I want to export my reducer function here as the file default,
now let's work on the logic. Upon success,
I obviously want to store this order in my orders array and I want to set loading to false because
we're done.
So I'll first of all copy the old state
then I'll set loading to false and then, I need to update my orders. Now the orders should be my old orders
and I concatenate a new item, as you learned concat returns a new array and therefore we added this
immutably.
Now that new order I want to add here actually is the order I receive from the, via the action,
you can see this in the order action creator,
there we receive order data but we also receive the order ID on a separate property,
I need to merge both together into one object here.
So what I'll do in my order.js file,
I'll simply add a new constant here, newOrder maybe and I'll set it equal to a javascript object
where I first of all paste all the properties of action order data, that is the order data we also
passed onto the server and I add a new property ID which is action order ID, that is referring to
that other property and that is the ID we will get back from the server.
With that, I have a new order and that is what I would want to concatenate here,
newOrder. Now for failing,
I want to return the old state,
I certainly don't want to clear my orders but I wanted to set loading to false of course also because
even if it failed, we're still done and the error should be handled through that modal since we added the
withErrorHandler higher order component to contact data.
Now that we're doing this, I'm also seeing a mistake I made here but I'll fix this in the next lecture
together with you too.
So first of all back to reducer,
we're now handling success and fail case, this is looking good.
Now let's fix this error
I just saw and let's make sure that we set loading to true when we start fetching a burger.