To make sure that we can also have orders in this application, we'll repeat something we did before,
we'll work on the orders screen and we'll work on our Redux logic so that we can store orders.
So I'll start by adding a new reducer,
the orders.js file which holds our orders reducer and of course we'll also need an actions file where
we manage our order related actions, the orders.js file as well.
So let's start with the orders.js reducers file here and again as always, we'll want to have some
initial state here which also kind of defines how our data is shaped in there and orders will be really
simple in this application,
it'll be just an array of orders, that's really all we need.
Then we can export a default function here which is our reducer, which of course has a state that's initialized
with the initial state, that receives an action and that of course is all handled by Redux and we return
our state here
but of course typically, we also then want to switch on the action type and handle a couple of different
cases here, so we can already add this switch statement. Now
regarding the cases we want to handle, the actions we want to handle, there is
one action I want to handle right now and that is my add order actions, so add order
also looks like a fitting identifier and then I'll export my add order
action creator here which should receive two things now -
my cart items or the items that are part of the order but these are my cart items the end and of course
the total amount and that's of course all the data we have in the cart in the end, we manage in the cart,
right?
We have a cart total amount and we have the items of the cart and since we order our whole cart, it of
course makes sense that this data ends up in the order.
Now here in the action creator, we therefore return our new action object and this action object has a
type which is add order and then for example an order data key where we merge our cart items, store them
in a cart items property and then amount holds total amount for example.
Now it's up to you whether you pass this in one merged order data property or if you have two or more
properties as part of your action object.
This is the action, back to the reducer, what should happen when we get an order?
Well I want to create a new order object and for this, just as before, I'll work with my own models.
So let's go to the models folder and there, add an orders.js file where we have a class order which I'll
export
so that I again don't forget this and in there, we get a constructor that allows us to create a new order.
Now how should an order look like? An order should have an ID of course, which is not the product
ID
because we can of course order the same product multiple times and therefore, an order is totally detached.
In addition, an order can hold more than one product,
in the end we order our whole cart there.
So order has a standalone ID,
it will get the items, the total amount and an order also needs a date of course because when we make
an order, we want to store that date when it was made.
And then I'll store all that data,
get my ID, get my items here, get the total amount and also get the date. With that
let's go back to the reducer, to the orders reducer and see what we can do with the orders there. In there,
I want to handle the add order case right now which is the only action I have.
So you need to import this action identifier of course and there, I want to create a new order, store it
in a new order
constant with the order model we just created which you therefore also have to import.
Now with the new keyword, we can create a new Javascript object based on that class and there, we need the
ID, the items, the total amount and the created date.
Now we only get the items and the total amount as part of our action here as you can tell.
Now the ID is something we'll later generate dynamically on a server, for the moment,
I'll use a dummy pseudo unique ID with new date to string, date of course is a built-in Javascript
object and this in the end generates an ID which is kind of unique.
Technically, we could create two orders at the exact same timestamp, at the exact same millisecond, though
in our app where we clear the cart after pressing add order or order
now, this will not really be possible.
So this is a good dummy ID for the moment,
it should be a string so that's important
and in addition to that, the items of course, that can be stored. We get this on our action, right,
the action has this order data property and in there, we'll have the items.
So action order data.items gives us the items and for the total amount, we can use
action.
orderData.
and then there, we have this amount property which we can extract,
so there we can use this.
Last but not least for the date, I of course want to generate a timestamp here with new date,
this built-in Javascript constructor, if we execute it like this gives us the current timestamp stored
in a Javascript object at the end.
Now this new order just needs to be added to our orders array, so we return a new state snapshot here
where we copy the old state, again
we don't really have any other state in here, so copying it is redundant
if we replace it anyways
but in case you had a more complex state snapshot here for this slice of your Redux store, you would
want to make sure you copy the other state so that you don't lose it.
That's why I add it here and then I set orders equal to state orders and now call concat on this array
which is a built-in Javascript function that adds a new item to an array and returns a new array that
includes that item.
So the old array stays untouched, the new array is returned and that of course allows us to update this
in an immutable way where we never touch the original data but we set the new state by creating a
brand new array that includes the new object and there I simply concatenate my new order. With that,
we can go to the app.js file and import the orders reducer there from the store folder, the reducers
folder and there, the orders.js file of course and merge that into our root reducer, maybe with an
orders identifier and then pointing at the orders reducer.
Now this should be a available and now we can dispatch actions, namely here our add order action
and of course tap into that states slice and get our orders. Dispatching actions is the first thing I
want to do, I want to do that from inside the cart screen when we press this order now button.
Right now we're not doing anything there,
now the goal is to place an order and also clear our cart. So here in the cart screen,
we already do import use dispatch and we're executing it so that we have the dispatch function.
All we therefore need to do is we need to import everything as order actions from store actions orders
and I'll therefore name this orders actions to be super precise
and now here when we click this button, this order now button, we can execute a function and in this
function, we dispatch a Redux action, the orders action, add order
with this action creator. Now there we need to pass two things - the cart items and the total amount. Of course
both is available here, total amount is stored in the cart total amount constant, cart items is this here,
so we just forward this, we forward cart total amount and that should be the second argument,
so as a first argument, actually the cart items, like this. Now please note that with that of course, I'm
forwarding cart items, I'm the storing cart items which are in the array and not in the format I have
it in my cart Redux store. There,
I do have an object but storing such an array of cart items in an order should actually
be fine,
so no need to kind of get that unchanged
object as well,
I'll stick to that array which I now store.
So now we dispatch this, to view it,
we now need to add an orders screen of course
and for that, I also want to add a menu button and a drawer that allows us to get there as an alternative
to our shop screens here.