So let's combine our reducers, we got two, burger builder and order. So in the index.js file in our application,
now it's time to combine reducers.
So first of all, let's import combineReducers from the redux package, then I want to import my second
reducer so I'll import my orderReducer from ./storeReducersOrder and now I can combine both.
So what I'll do is I'll creates a new constant here, routeReducer because they are combined into one
reducer as you learned, call combineReducers here and pass a javascript object.
And there, I can now just pass burger builder and assign that burger builder reducer and order and assign
the order reducer,
the two things we import and the root reducer is then what I passed to create store. With that, the whole
application will break because now we have different slices of state, burger builder and order.
So I need to go to my containers and update, in the burger builder container, the bottom where I reach out
to state ingredients total price and error,
this should all be state burger builder ingredients and the same for total price and error. In the checkout
container where I also get the ingredients, that should be state burger builder ingredients, in the
contact data container where I reach out to the ingredients
too, this should also be state burger builder ingredients in state burger builder
total price but the loading here is coming from the orders, so this should be state orders loading to
use, oh just order excuse me, to just order to use that property
so just state order or loading. With that we can save all these files and go back to the application, looks
good,
this still works. If we now continue,
let's see if we can successfully dispatch an action here.
So here I'll enter some test demo data,
just something we can submit, test@test.com, let's click order.
We saw the loading screen,
we get something back from the server, that's looking good,
let's have a look at redux,
I see at least one thing which won't work as expected,
we get purchaseBurgerStart and we saw the spinner for a second, so that worked and purchaseBurgerSuccess
and in success, we see all that the orders were updated, that we added this new object here where
we have our ingredients and then stored some data in it.
If we have a look at the state,
we can expand our orders,
have a look at that order and we see that this order here,
I think I need to make this a bit broader to see all of it has an ID which is not correct,
I should have extracted the name property so that's one thing we need to adjust.
Besides that, all of that seems to be working
rather good,
of course we're not redirected once we're done.
So this id fix and being redirected, that are the things I want to fix,
let's just check quickly if it did work on the backend too
but obviously it did, we wouldn't have gotten an id otherwise.
So that's looking all good,
we got a burger here.
Delivery method wasn't passed on I see,
so that is something we should also fix
but besides that, looking good. So let's fix all these things and let's then see what else we can do in our
application.
Let's quickly fix the issues we found,
one is in the contact data here where we submit the form,
the thing is, if we never adjust the dropdown value then the value is empty
and it shouldn't be,
it should be let's say fastest, by default.
So I just added this to the value property in the delivery method
object in the state of the contact data,
that's one important adjustment to have this work correctly. Now
one other thing is in the reducer in order.js, when we have a success and we get the id, here action order
ID, that's the wrong ID because in the order file in the actions folder where we pass on the ID, I pass
on response data as the ID
but instead, we just saw in the log that its on the name property on the data, that is the ID we want
to store.
But with that, we have this working the only missing thing is that we redirect it, re-route and that is
something I'll do in the next lecture.