So to show you how redux works, I attached a project to this lecture.
It's a very simple project with a container,
the counter container and two components.
In the end, what it does is it gives us this page where we have a counter at the top which we can manipulate
with these buttons and these buttons just use the normal state as react gives it to us as we used it
before, with the state property and our methods.
So this is normal react state, nothing redux-ish about it,
redux wasn't even installed,
that is the next thing I want to do though. I'll quit npm start and I'll run npm install --save
redux, just redux.
Now I said the redux library works standalone and we'll actually use it standalone for now but we'll
soon add it to our react application to see how it works together with it.
So with redux installed, I'll create a new file in the root folder next to the package.json file,
I'll name it
ReduxBasics.js.
Now this file here will not be holding any react code, we won't include it into our react project, I'll
execute it with nodeJS
instead, just to show the different concepts of redux in one file and to show that it's independent
of react.
So in this ReduxBasics file, I want to create everything that we need to use redux,
that of course is the store, that will be my reducer, that will then be an action probably or some code
dispatching an action
and we also certainly want to see a subscription action.
So let's start with the store
and for that, I need to import something from redux.
Now we'll still use the import something from something syntax later when we go back to react
but since I plan on executing this file with node, I need to use the node import syntax, which is I'll
create a constant, name it redux maybe and this constant will now require redux, like this.
Again, this required syntax is
nodeJS syntax and are only required because I want to show these with nodeJS
only first, we'll soon go back to react,
no worries.
So here I can then create a constant name, createStore which refers to redux.createStore, createStore
is a function but don't execute it yet.
createStore as the name suggests allows us to create a new redux store, I'll store it in a constant
named store
but you can of course give this constant any name you want, and here I'll simply execute
createStore, like this.
createStore like this won't do much though,
a store needs to be initialized with a reducer because the reducer
and remember we only have one reducer,
even if we combine multiple ones, they will be merged into one.
The reducer is strongly connected to the store,
it's the only thing that may update the state in the end.
That's why we need to pass the reducer to this creation function here because it's so closely connected
to the state.
Therefore I actually need to create my reducer first before I create the store,
so here, I'll create my root reducer,
the name of course is always up to you and that is just a function, you can of course create it with the
function keyword
now, you can also use an arrow function, whatever you like.
Now this function here receives two arguments,
the first one is the current state
because as I said, the reducer gets two arguments,
state and the action and the state is the old state which it then may update.
So the state is the first argument,
the second argument is the action and then the function has to return one thing and that is the updated
state.
The simplest reducer you can write simply returns the old state,
so this is a valid reducer though of course it does nothing,
it just returns the state you already had.
But we can already use that reducer and pass it as an argument to createStore rootReducer,
with that, our reducer our store is created with that reducer in mind and now we have a created store,
however this store will hold an undefined state.
We can verify this by console logging store and there, getState, that's a function we should execute
and it will pull out the state from the store.
Let's have a look at that,
now we need to execute that file with nodeJS and we do this by typing node in the command line and
then the file name,
you need to navigate into the folder of that file first in the terminal though, so in my case, node
redux-basics.js, this will execute the file and spit out any console log outputs
right in the terminal.
So here you see undefined and that exactly is coming from this console log statement,
the state is undefined because our root reducer only returns the old state and we never initialize
it. To initialize the state,
I'll set up a new constant which I'll name initialState, as for all constants this name is up to you.
It's a javascript object though
theoretically, it could also just be a number or anything like that
so it doesn't have to be object but most often it is because you have more than one field in your global
state most of the time
but if your global state is just a number, you could set up just a number. Here
I'll set up javascript object though and this javascript object should for example hold
my counter, can be null, zero initially.
Now in the root reducer, I'll use a feature provided by ES6, I can initialize this argument to the function
with a default value, whenever this function is now called with this argument being undefined,
it will take the default value instead. A default value is simply assigned by adding an equal sign and
then the value you want to use as a default,
so now it will take initial state whenever state is undefined, which will be the case when it's creating
that store where it will execute the reducer for the first time. For all subsequent actions,
the reducer will have been executed one time so the current state then will be your initial state and
you can start changing that. With that in place,
let's save this file and let's rerun node redux-basics.js.
We do this,
we now see our new state down there, with counter 0, this is the updated state or the initial state
I should say. So this is how we create a store with a reducer and how we initialize the state,
how do we now subscribe to the state and dispatch actions?
Let's take a closer look in the next lectures.