So we learn about redux and the redux-basics.js
file.
We don't work with that file anymore now, instead
now, I want to connect my react application to redux and use the advantages of redux in it, so that
in the end, I managed my state with this counter and the buttons here with redux. Of course for such a
simple application like this one, redux might be overkill but it is good to use a simpler application
to practice the basics, we'll then apply redux to our course project in the next module too,
no worries.
Now we already installed redux
and with that, we can create a store.
This store should be created right before our application or when our application starts, so the index.js
file is a great place, this is where we mount our app component to the dom,
so creating the store here also makes a lot of sense.
Therefore I'll import something and now I'll use the good old ES6 imports here from redux,
so from the redux package we installed, and the something is the createStore function.
Then before mounting the app, I'll create the store and store it in a constant named store
so a lot of stores are here I guess.
So I create my store with create store,
now you learned that this takes a reducer as the input. For that,
I of course need to create the reduced too and I won't do this in this file, I will have more complex
reducers in react applications with a lot of code for different types of actions and therefore, we typically
store that logic into their own files.
Now there are different set ups you can use but you'll often see that there is a store folder in your
project next to the containers and the components folder and in there, you can have a reducer.js
file,
this will now be the file where I'll export the reducer I want to use. Still the reducer is just a function,
a function which retrieves a state and an action and then has to return a state, that doesn't change
a bit.
I will then export this as the file default so that we can use it outside of this file and I will also
set up an initial state here,
a javascript object which should reflect my initial state for that reducer. I'll set this to counter zero
here too because we have a counter in this application. Now I'll assign it here for my state, initial state
like this
and with that, we got a finished reducer.
Now we can import this in the index.js file,
so I'll add an import, import reducer from
and now ./store/reducer.js without the extension as always and pass that to create store.
With that we're creating a store successfully with our own reducer,
just like we learned before in the nodeJS file.
Now of course the reducer alone doesn't do that much,
we also want to connect this store which you just create and store in a constant here to our react
application and we want to be able to get slices off the state in our react containers, so that we can
display the state or render something depending on which state the application has.
And of course we also want to be able to dispatch actions, so connecting redux to react,
that is what we'll do next.