So let's start by installing redux and react-redux so I'll quit the npm start process and I'll simply
run npm install --save redux and react-redux, hit enter to install these two packages so
that we can use them here and can conveniently access our redux store in the react application.
Once this is finished,
you can of course restart your build process and the development server with npm start to see your lovely application
again.
Now with both installed, it's of course about time to again create our store, the reducer and the actions. For
that, I'll
again reintroduce a folder directly in the source folder which i'll name store and in there,
I'll add a new file, reducer.js
.
and of course actions.js
because I want to export my actions as constants
to again prevent me from mistyping or introducing some errors just because I try to hard code strings
in multiple files.
So therefore, let's now start with the basic action types we'll probably need, if we start with the burger builder
and really the core functionality of building that burger,
we can dive into the burger builder container and have a look at the methods we created there.
We got an addIngredientHandler and we get a removeIngredientHandler,
these of course are the two main things we do, add ingredients and remove ingredients, so therefore we
probably want appropriate actions,
export a constant which we'll name addIngredients and assign a string with the same value,
addIngredients and then duplicate it to also create the respective action for removing ingredients.
And actually we can name it
addIngredient,
removeIngredient because we never add more than one or remove more than one at a time.
So we get these two actions and before we add more, let's start with this, let's build up the store with
this and then let's add more and more functionality over to the next lectures.
Next let's implement or start implementing our reducer,
there I will import everything as action types from these actions.js
file,
then I'll create a constant initialState to define what my state should look like initially and in
there, we probably want to have the same state we already use in the burger builder. There if we scroll
up,
we got of course a lot of fields, now
I said I want to start with ingredients and the total price
so let's copy these two and move them over into the reducer.
So now we get ingredients and total price there too in the initial state.
Then we can create the reducer itself, a function simply, maybe stored in a constant named reducer, using
the ES6 function syntax where we get the state which is set to initialState
well initially, in case you get undefined as a state which we do with the first time this runs and then
let's also add the action which we'll also receive here.
Now at the end of everything,
I of course also want to export my reducer as the file default. Now we'll of course have to fill this
reducer with some life, we'll do so in the next lecture. Before we do that
let's set up the state management in the index.js file where we wrap our entire application and there,
we already see something interesting,
we already do wrap our application here with the browser router.
That of course can lead to confusion or maybe it is something we haven't looked at before,
where should we now add our provider component from react-redux, inside of the browser router or outside?
Let's set this up together in the next lecture.