So, I want to first start off with why Redux? Redux is a great library for managing an applications state.
A little thing about React, it’s a powerful library that allows developers to create web applications super fast. You have useful shortcuts thanks to JSX, so instead of ‘document.createElement(tagName)’ and creating other elements you want to attach to your newly created element or if want to add a class name like:
You can write it with JSX (looks like HTML…it isn’t):
Say Whaaaaaaat? Ok, if you’re not new to React you probably just rolled your eyes but it’s still pretty cool even after working with it for a while. Take a step back, it’s still cool.
Now if you are new to React, here’s a decent video tutorial: https://www.youtube.com/watch?v=Ke90Tje7VS0&pbjreload=10
With React, there is are a few fundamentals when thinking about React. Here is another post where I wrote about state which is largely the focus when implementing Redux: https://medium.com/@roderickcardenas1/react-a38cbcff5180
Now the thing with state, is that depending on the structure of your application, certain components will re-render if the state that has changed is coming from an upper level component. There may be times where you are thinking about creating an app where scalability is your focus, that is where Redux shines. With Redux, you can abstract state away from all of your components and connect the components that need to access state when needed. You can focus on building your application without worrying about passing down props and which component is currently holding the prop etc.
Lets get started with npm create react-app [project name]:
This will initialise your react application. Now let’s install redux with npm install redux and npm install react-redux:
Now, you should have a folder directory that looks like this:
REACT-REDUX-BOILERPLATE is the project folder. You will be coding in the src folder. Here, we are going to create four more folders within to keep everything organised:
actions and reducers are part of react-redux. Think of reducers like this, for every piece of state, you will want a reducer.
This is how you will connect your components to individual pieces of state in your app. Actions, are commands that you will send to the reducers to update a piece of state.
Your new folder setup should look like this:
We are now going to import react-redux. Make sure you are coding in index.js
First we will take what we need from redux and react-redux by importing them:
We will need a simple reducer to get our store started. Here is a simple one for the time being, we will include it in this file for now but we will need to move it later. When writing a reducer function, it will take two arguments, state and action. State will have a default value, when setting this, think about what you want state to eventually hold. Is it an array? Is it an object? This will affect how you set up your components.
Actions, your reducer will be listening to specific actions and adjusting state depending on the action it receives. If it doesn’t recognise the action, you want there to be a default value. In this case, our reducer is listening for ‘GET_POKEMON’ and state will adjust to the payload that is sent. We will get to payloads once we create our actions.
I am going to use the Pokemon API because, well, it’s what I thought of right now and will do the trick for this tutorial.
Here’s how we will create our store which will hold our applications state. Each piece of state will be represented by a reducer, we only have one at the moment.
So, you notice the compose function is holding another piece of code inside? That’s to include the redux developer tools for Chrome. Super useful to track when your state changes are taking place.
Lastly, using Provider to pass the store down to the rest of the app so any components nested can access state with the connect() function(more on that soon.)
Your index.js file complete:
Ok, so we don’t start a bad habit. We are going to move the reducer we created to our reducers folder, create a new file called ‘getPokemon.js’ and cut the code out of your index.js file to have this in your ‘getPokemon.js’:
Now to create our first action. Create a file in your actions folder called index.js and start coding in the file. The first action will be to get all of our Pokemon. It will be a function that returns an object like so:
Create an API.js file in your main src folder. We will build a quick function to get the first 20 Pokemon:
We will use this to then update our store/state for Pokemon to contain the first twenty Pokemon.
Now move on to App.js, we will start with importing what we need:
Now, we will create a function called handleClick() that will execute once someone has clicked on a button we will render on the page that says GET POKEMON.
Looking at the data, what we want is in the results key of pokemon. Now, to connect the App component to our current state (an empty array ) and to pass our actions to the component so they can trigger our reduces to change our state of Pokemon:
Your App component should now look like this :
Run NPM start in your terminal, your browser should open up like so:
But how do we check if it is doing what it should be? Well, that’s what the developer tool will allow you to do. So make sure you have the Redux Dev Tool extension installed: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
And open up you console in browser, on Macs, just hold onto command, option and press J. You screen should look like this:
Head over to the Redux tab:
Click on state:
See our Pokemon? It’s an empty array. Now click on the GET POKEMON button on the page:
See that? The app works by sending the data to our action, our reduce hears it and boom, changes the state of our Pokemon to an array of two objects containing our Pokemon. Now, this may have been a little long winded but now that you have your boilerplate all set up, you can add more pieces of state, new actions and reducers and create new components and have more control of when these state changes take place.