Setup Redux in a React app
Posted on 25th October 2019
11 min read•
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.
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.
type specifies the type of state change that has to occur and
payload contains the new value of the state.
Note that actions do 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
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
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.
In the end
index.js should be like this.
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
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.
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
getUser inside the
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.
Display component should be like this.
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
- We’re limiting the
userIdbetween 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
getUseris 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
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! 😊
Leave a Reaction below