Intro to React-Redux
A quick dive into to state management with Redux, walkthrough included
After having used React for a little while it is fair to say that you have had to deal with state quite often. It is also possible that you have heard mentions of something called Redux that can help you manage your state more efficiently. Now, I should mention that it is entirely possibly to create an application without the implementation of Redux and that is fine, I have done it. But as applications grow and get larger, state becomes more difficult to manage throughout the application’s various component layers. This is where Redux can step in and lend us a hand by managing the state for our application.
Let’s first take a deeper look at what Redux is and what it actually does for us as developers. Afterwards we will use Redux to manage the state within our example React application.
What is redux?
Well, by definition Redux is a predictable state container for most all JavaScript applications, should your flavor be React, vanilla, or Vue. The key here being that Redux is predictable and because it is predicable, we know that it will behave consistently.
But why use Redux?
The selling point for Redux is the fact that it will maintain the whole state of your application. But doesn’t React have the ability to manage state all on its own throughout the whole application? Yes, it most certainly does but where we declare state means everything in React. Redux allows us to make our state global and centralized. This is because our state comes from our ‘store’, which acts as our single source of truth. Take a look at the example below:
Without the use of redux, our state within that current state is only accessible to itself as well as its child components. What if we need to access the state we have declared in a parent component or a separate component entirely? In that case we would need to move our state container to the highest component level.
With Redux, we are able to create state on a number of different component layers and have state accessible throughout our entire application.
If you would like to follow along as we walkthrough using Redux, you can find the boilerplate repo here.
Using Redux
Now that we have a basic idea of what redux is and what it can do for us, let’s get to actually using it and store some state. We will first need to install Redux for our React app but it is not quite as simple as just plug and play. To install the necessary Redux packages you can do so by running the following command.
After that has completed, we can head over to our index.js where we will be wrapping our app with Redux’s provider. This should always be your first step, as this is what will help make Redux’s store global throughout the application because of its existence on the highest level. We must be sure to import Provider first from our react-redux package and can then replace react strict mode like so,
You may also notice that I have added a prop of store to our provider but is currently empty. This is because we will need to first create our store before we pass it down to our provider. Before we create our store let’s talk about Redux file structure. Although this may seem not needed for the level of our application, it is good practice as state only has the possibility of getting larger.
We can do so by creating a new folder named redux within our source (src) folder. We will then create a new folder within redux named store containing an index.js. Within our new index.js we can create our store by importing Redux’s create store function. This function happens to take in another function, our reducer, which we will create shortly. For now we will pass the future name of our reducer, main reducer. Your redux/store/index.js should look as such:
We can also pass our created store down to our provider. We will simply just need to import our store folder, since imports will look for an index.js when importing a folder. It is worth it to note that it is also convention to name your store, store. Your updated src/index.js should look as follows,
We have now created our global store for our application, but we still have one problem. Didn’t we just place a reducer function in our store that does not yet exist? Yes we absolutely did, but don’t worry that now leads us to building out that reducer, main reducer. To keep our file structure looking good we will create a new folder within redux named reducers and create a file called pokemon.js. This is where we will create our reducer for the original 151 Pokémon.
Our reducer is a function that will always take in state and an action as arguments. The great thing is that we can declare our states data type outright, in this case an empty array as opposed to leaving it undefined. We do not need to define our action type as that will be passed in later on through our dispatch function. We will need to tell our reducer that its action type can vary based upon the commands we send. Afterwards, we will also need to declared to our reducer how to handle those action types. By default we will want it to return our state, and at this point technically have a complete reducer.
But were not quite finished just yet. We will also need to create an index.js as well as a user.js within our reducers folder. We will be created another reducer that will hold the state of our user which we will set by default and will look almost identical to our pokemon.js. My reasoning behind this is because you will rarely be dealing with only one piece of state and to have multiple pieces of state, we will need to call on the combine reducers function provided by redux.
In our redux/reducers/index.js we will import the combine reducers function, as well as our two pieces of state Pokémon and user and then return in the combine reducers function. Now that we have also completed our main reducer, we need to be sure to import that into our store to function correctly.
Now that we have set up our bases let’s actually set our state of Pokémon from a fetch request to the one and only pokiapi. To get started we will head on over to our app.js, and yes I know this is the top level of the application why do we need Redux anyways but were keeping things simple for right now. We will use React’s hooks use effect to simulate a component did mount for out get Pokémon fetch. Everything will look very similar until we need to actually set the state of our Redux store for Pokémon.
To do so we will need to dispatch our actions to the store, and can be done more easily using the use dispatch function that will give us access to the dispatch function. After setting our use dispatch function to a constant variable of dispatch, for ease of use, we can now set our state. Our dispatch will take in an action ‘type’, as we declared in our reducer, but we don’t have a type yet. Don’t worry, we will create the name our type now called set Pokémon, as well as set our payload. Your current app.js should look as such,
Before we get any further building out our frontend, we need to let Redux know about our new action type specifically our Pokémon reducer. Because all it knows what to do right now is just to return the initial state that we gave it. To remedy this situation, we will simply need to add a case to our reducer letting it know that we will be setting our Pokémon and to return our ‘updated’ state of Pokémon after our set Pokémon action has been dispatched.
In addition, we will also want to create another new folder within redux named types with an index.js. If you have not been catching on by now this is where we will store and declare our different action case types. Again, it may see counter intuitive right now as we currently only have a single type, but apps can only get larger so prepare for the worst and get ready for more state. Be sure to import you set Pokémon type into your Pokémon reducer like so,
Now that our reducers are finally squared away, we can swing back over to our app.js where we will need to make our final import, use selector. Which is another function offered from the React Redux package which essentially lets us select state from our store. It will simply take in state and then return what we want, in this case our Pokémon. We will set it to a constant variable with the same name, making it very easy use when trying to render something to the page like so,
In the above example we map over each of the Pokémon held in state, rendering a div for each containing their names. As I have stated before, I myself have created many React applications that do not use Redux and there is nothing wrong with that. Your application will or may not always need to implement Redux but that is a decision you will need to make for yourself.
If you would like to view a copy of this code to play around with or just for reference, you can find the link for the GitHub Repo here.
I would like to thank you for reading along and hope that you have learned something new! Keep an eye out for more articles in the future!
