reducer.js in the redux folder.
Now, the reducer.js file is where I will implement my reducer function.
So, as you recall from the lecture,
the reducer function is a pure function.
So, how do we implement that?
Now, I will also need to update the main component to make use of redux.
So, let me go to the main component,
and am going to cut out this from the main components.
So the dishes, comments,
leaders, and so on.
I'll cut it out from the main component,
because my main component will now obtain the state from my Redux Store.
So, I move all that into reducer because this is where they will set up our state.
So, dishes, comments, leaders and promotions I have moved them in to reducer.js file.
Now, in addition, before I set up the reducer function let me create
a constant named initialState,
this is nothing but a JavaScript object here, initialState.
Now how do I initialize this initial state?
Now, this would contain
exactly the same structure as the state that you see in your main component.
So, I'm going to remove the state from the main component,
because I will no longer need that there and then move
that whole thing into this initial state here.
Again, going to the main component I'm going to remove
the state from the main component completely,
because I won't need that there anymore.
So, you'll notice that I am simultaneously updating main component, and reducer [inaudible].
So now, what this is specifying is,
this is the initial configuration for my state.
Now later on you will see me updating this
in a bit more detail as we go through the exercise.
Now, to create our first reducer function,
we will export the reducer from here.
So, we'll say export const reducer.
So, this is reducer function that I'm going to create.
What is this reducer function?
This reducer function is going to receive the current state,
and then an action.
So as you'll recall to generate the next state we need the current state and an action.
So, these are the two parameters my reducer function is going to receive,
and this as I said is a pure function,
and so I cannot modify the state directly here in the reducer,
I can only do an immutable change and
then return an updated version of the state from this reducer.
So, that is what the reducer functions job is.
Now, at this moment I don't have
anything to do because I haven't implemented any actions.
So, what I'm going to do is as a default I will just return the state,
so I'm not modifying the state in any way so,
I'm just returning the current state from the reducer function.
This is good enough to get started in this exercise.
We need to set up the reducer function because our store needs to
know what to do when an action is dispatched to it.
So that's the way we set up our reducer function.
Now, also we will make use of
the ES6 way of specifying a default value for a parameter.
Now, when the reducer is called initially,
at the start of your application your state will be uninitialized.
Now, when your application is started you want to
initialize your state to the initial step that we have just specified earlier.
What is this initial state?
This initial state contains four properties,
dishes, comments, promotions, and leaders.
We have seen why we need these in our application.
So, what I'm going to do is I will make use of
the ES6 way of defining
functions where you can specify the default value for a parameter,
and then I'll say,
state equals to initialState.
So, when the reducer is first called by my store,
my store would have no state,
so the stage will be uninitialized.
So it will be undefined there.
So, in order to avoid issues with that I'm going to say that if the state is undefined,
the default value will be initialState which I have just defined earlier.
So, that is what I'm going to be supplying to my reducer function here.
So, this reducer function right now it is not doing anything,
it is just returning the state as is because I haven't defined any action,
so I'm just going to return the state as is,
and that is good enough.
This is a pure function here.
It is not changing the state in any way,
so it is just returning the current state as is as a starting point.
Now, that we have created the reducer function let's also configure our store here.
So, I'm going to introduce another file here named configureStore.js.
Now, this is just convenience,
you don't have to do it this way but I find it convenient to do
the store configuration in a specific file and then export that from there.
So, this is just my way of doing it,
you would see examples of use of redux where they don't necessarily follow this approach.