Akhila Ariyachandra

Posted on Oct 28, 2019 • Edited on Jun 11, 2020 • Originally published at akhilaariyachandra.com

Setup Redux in a React app

#react #redux #javascript

PS - This was originally posted on my blog. Check it out if you want learn more about React and JavaScript!

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.

Getting started

For this post I'm going to use the React app I made in an earlier blog post available here.

git clone https://github.com/akhila-ariyachandra/react-parcel-starter.git
cd react-parcel-starter
yarn

First let's install all the Redux related dependencies.

yarn add redux react-redux redux-logger redux-thunk

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.

// src/redux/user/store.js

const initialState = {
  isFetchingUser: false,
  userId: 1,
  user: {},
}

export default initialState

Setup the Actions

Next we need to setup the actions. Actions are sort of signals used to alert redux to change the state. Actions are just javascript functions that return a object.

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.

// src/redux/user/constants.js

const constants = {
  IS_FETCHING_USER: "IS_FETCHING_USER",
  SET_USER_ID: "SET_USER_ID",
  SET_USER: "SET_USER",
}

export default constants

Now let's create the actions.

// src/redux/user/actions.js

import constants from "./constants"

const { IS_FETCHING_USER, SET_USER, SET_USER_ID } = constants

const setIsFetchingUser = isFetching => ({
  type: IS_FETCHING_USER,
  payload: isFetching,
})

export const setUserId = userId => ({
  type: SET_USER_ID,
  payload: userId,
})

const setUser = user => ({
  type: SET_USER,
  payload: user,
})

export const getUser = userId => {
  return async dispatch => {
    dispatch(setIsFetchingUser(true))

    const response = await fetch(
      `https://jsonplaceholder.typicode.com/users/${userId}`
    )

    const responseJson = await response.json()

    dispatch(setUser(responseJson))
    dispatch(setIsFetchingUser(false))
  }
}

Let's go through the actions.

setIsFetchingUser - This action is used to change the isFetchingUser.
setUserId - This action is used to change the userId.
setUser - This is used to change the user.
getUser - Is used to get the user from the API.

setIsFetchingUser, setUserId and setUser are similar to each other in that they all return a JavaScript object with type and payload. type specifies the type of state change that has to occur and payload contains the new value of the state.

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 isFetchingUser to true.

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.

// src/redux/user/reducer.js

import constants from "./constants"
import initialState from "./initialState"

const { IS_FETCHING_USER, SET_USER_ID, SET_USER } = constants

const reducer = (state = initialState, action) => {
  let { isFetchingUser, userId, user } = state

  switch (action.type) {
    case IS_FETCHING_USER:
      isFetchingUser = action.payload
      break
    case SET_USER_ID:
      userId = action.payload
      break
    case SET_USER:
      user = action.payload
      break
    default:
      break
  }

  return { isFetchingUser, userId, user }
}

export default reducer

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.

// src/redux/index.js

import thunk from "redux-thunk"
import logger from "redux-logger"
import { combineReducers, createStore, applyMiddleware } from "redux"

// Import initial states
import userState from "./user/initialState"

// Import reducers
import userReducer from "./user/reducer"

In order to keep our redux states organized, we will group our states. In this example, we will keep all user related data under user.

const initialState = {
  user: userState,
}

const rootReducer = combineReducers({
  user: userReducer,
})

Then all we have to do is create the redux store and export it.

const configureStore = () => {
  return createStore(rootReducer, initialState, applyMiddleware(thunk, logger))
}

const store = configureStore()

export default store

In the end index.js should be like this.

// src/redux/index.js

import thunk from "redux-thunk"
import logger from "redux-logger"
import { combineReducers, createStore, applyMiddleware } from "redux"

// Import initial states
import userState from "./user/initialState"

// Import reducers
import userReducer from "./user/reducer"

const initialState = {
  user: userState,
}

const rootReducer = combineReducers({
  user: userReducer,
})

const configureStore = () => {
  return createStore(rootReducer, initialState, applyMiddleware(thunk, logger))
}

const store = configureStore()

export default store

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.

import React from "react"

const Display = () => {
  return <div></div>
}

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.

const mapStateToProps = state => ({
  user: state.user,
})

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.

import { bindActionCreators } from "redux"
import { getUser } from "../redux/user/actions"

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.

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators({ getUser }, dispatch),
})

Then when exporting the component it'll be wrapped in the connect Higher Order Component.

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Display)

Once that's done we can access the props like this.

import React from "react"

const Display = ({ user, actions }) => {
  return <div></div>
}

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.

React.useEffect(() => {
  actions.getUser(user.userId)
}, [user.userId])

After that let's complete the return of the component.

return (
  <div>
    <table>
      <tbody>
        <tr>
          <td>ID: </td>
          <td>{user.user.id}</td>
        </tr>

        <tr>
          <td>Name: </td>
          <td>{user.user.name}</td>
        </tr>

        <tr>
          <td>Username: </td>
          <td>{user.user.username}</td>
        </tr>

        <tr>
          <td>Email: </td>
          <td>{user.user.email}</td>
        </tr>
      </tbody>
    </table>
  </div>
)

Finally the Display component should be like this.

// src/components/Display.js

import React from "react"
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import { getUser } from "../redux/user/actions"

const Display = ({ user, actions }) => {
  React.useEffect(() => {
    actions.getUser(user.userId)
  }, [user.userId])

  return (
    <div>
      <table>
        <tbody>
          <tr>
            <td>ID: </td>
            <td>{user.user.id}</td>
          </tr>

          <tr>
            <td>Name: </td>
            <td>{user.user.name}</td>
          </tr>

          <tr>
            <td>Username: </td>
            <td>{user.user.username}</td>
          </tr>

          <tr>
            <td>Email: </td>
            <td>{user.user.email}</td>
          </tr>
        </tbody>
      </table>
    </div>
  )
}

const mapStateToProps = state => ({
  user: state.user,
})

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators({ getUser }, dispatch),
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Display)

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.

React.useEffect(() => {
  actions.getUser(user.userId)
}, [user.userId])

This is the Controls component.

// src/components/Controls.js

import React from "react"
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import { setUserId } from "../redux/user/actions"

const Controls = ({ user, actions }) => {
  return (
    <div>
      <button
        onClick={() => actions.setUserId(user.userId - 1)}
        disabled={user.userId <= 1 || user.isFetchingUser}
      >
        Previous
      </button>

      <button
        onClick={() => actions.setUserId(user.userId + 1)}
        disabled={user.userId >= 10 || user.isFetchingUser}
      >
        Next
      </button>
    </div>
  )
}

const mapStateToProps = state => ({
  user: state.user,
})

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators({ setUserId }, dispatch),
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Controls)

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 connect.

// src/App.js

import React from "react"
import store from "./redux"
import Display from "./components/Display"
import Controls from "./components/Controls"
import { Provider } from "react-redux"

const App = () => {
  return (
    <Provider store={store}>
      <Display />

      <Controls />
    </Provider>
  )
}

export default App

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).