Setup Redux in a React app
If you have used React chances are you have run into Redux at some point or the other. Redux is a library that help in sharing one single state between many components.
Redux consists of the three parts, the store, actions and reducer. I'll explain each of these as we go through the post.
First let's install all the Redux related dependencies.
- redux - is the main library.
- react-redux - makes it easier for us to use Redux in React by connecting the components to the state.
- redux-logger - is an optional middleware which records all changes happening in Redux in the console.
- redux-thunk - another optional middleware to allow asynchronous actions in Redux (more on that later).
Before we start setting up the Redux parts, let's create a folder called redux in the src folder to store all our Redux related code.
Setup the Store / Initial State
The store is the first part of redux we are going to setup. The store is what holds the state in redux.
In the redux folder create another folder called user and in it create a file called initialState.js. This is where we'll define the initial state that redux is going to load with. We'll need one state to store the user id, one to store the user and one to indicate whether is app is in the middle of retrieving a user.
Setup the Actions
We'll need a couple of actions, one to change the user ID, one to change the user and another one to fetch the user from the API.
Before we create the actual actions, let's create some constants. These constants will be used to specify the type of state change that has to occur.
Now let's create the actions.
Let's go through the actions.
- setIsFetchingUser - This action is used to change the
- setUserId - This action is used to change the
- setUser - This is used to change the
- getUser - Is used to get the user from the API.
Note that actions to not directly change the state. They just signal to change the state.
getUser is different by being an asynchronous action generator. By default redux only allow for synchronous action generators, but with redux-thunk we can generate functions too. To create a a function generator all we need to do is return a function which has the
dispatch argument. The
dispatch argument is a function that is used call other redux actions inside the current function such as us calling
dispatch(setIsFetchingUser(true)) at the beginning to set
Setup the Reducer
The reducer is the part of redux that changes the state based on the object return from the actions. The reducer has two arguments, state for the state to change and action for the object returned by the actions. The initial state will also be set as the default parameter of the state argument.
In the reducer all that has to be done is for the state to be changed based on the action, so we check the type of the action and change the state with the payload of the action.
Setup the store
Now that we've setup the initial state, actions and reducers, it's time to tie them all together. First create index.js in src/redux and import the required dependencies.
In order to keep our redux states organized, we will group our states. In this example, we will keep all user related data under
Then all we have to do is create the redux store and export it.
Tying Redux to React
We could user redux as is, but we could make it easier to work with using the library react-redux. With react-redux we can pass the redux state and actions through props to the component.
Building the rest of the app
To demonstrate how we can use redux to share state between multiple components we going to build the following app.
We can spilt the app into two components
- Controls - Will be used to set the userId.
- Display - Will be used to display the user.
The Display component
We'll start with the Display component. Create a folder called components in src and then create Display.js in it. Once that's done declare the component in it.
Now we can connect redux to it. We'll need the user state and the
getUser action. We can use the
connect import from react-redux to wrap the component with a Higher Order Component which will provide the redux state and actions. connect takes two arguments.
mapStateToProps- will be used to select which part of the redux state to pass into the component.
mapDispatchToProps- will be used to pass the redux actions as props to the component.
For mapStateToProps we need to declare a function with the redux state as the argument. It should return the state we want to send through the props.
All we are doing here is accessing the user section of the redux state and sending it through the user prop. The name of the key is the same as the name of the prop.
Before we declare mapDispatchToProps we need two more imports.
getUser is the redux action to get the user and bindActionCreators is used so that the actions can be called directly instead of inside
store.dispatch all the time and also group them. We'll put getUer inside the actions prop.
Then when exporting the component it'll be wrapped in the connect Higher Order Component.
Once that's done we can access the props like this.
We can set the component to load the user every time the userId in the redux state changes. If you want to learn about how to mimic react life cycle methods with hooks, check my post here.
After that let's complete the return of the component.
The Controls component
The Controls component will only be used to change the userId in the redux user state. We don't need to fetch the user in the Controls component because the effect in the Display will automatically run whenever the userId is changed.
This is the Controls component.
A few notes here.
- Instead of importing and using getUser we're using setUserId
- We're limiting the userId between 1 and 10 because that's the number of the user records the API has.
- We're also disabling the button based on isFetchingUser. It will be set to true when getUser is called so the buttons will get disabled when a request to get the user is made and set to false once it's complete.
Bringing everything together in the root component
One thing we need to do to enable react-redux throughout the whole app is wrap the root component with
Provider component from react-redux. Once we do that all the child components will be able to use redux through
store is the redux store will initialize and exported in src/redux/index.js.
Try running the app now. The user displayed should change when the buttons are pressed even though there is no direct link between the components (i.e. passing props to each other).
This is a sample of the setup we just did. If you think you missed something, feel free to check out the code.
If you found this post helpful please make sure to share it! 😊