How to Add Redux into create-react-app

May 10, 2020

Redux is the most popular State container library for frontend apps. It helps you manage your state in a predictable and easy way.

Redux Flow Redux Flow

This post is about setting up Redux on your new/existing React app.

Create react APP

I am taking the most popular React-boilerplate (create-react-app).

If you are very new to React and do not know what create-react-app is, then follow the link below.

npx create-react-app my-appcd my-appnpm start

Redux Documentation

You can find the official documentation of Redux on the link below.

Do you really need Redux in React?

Photo by [Polina Zimmerman]( from [Pexels]( Photo by Polina Zimmerman from Pexels

Before implementing Redux, I would highly recommend that you go to this post below by the creator of Redux (Dan Abramov).

Now, if you are sure that you want to use Redux than, let’s get started.


Basic knowledge of JavaScript and React.
Basic understanding of create-react-app.

Setup CRA (create-react-app)

Install the Desired Packages

redux — The base package
react-redux — Package to use the Redux features according to React

Install the npm Packages

npm install redux react-redux redux-saga

Redux Folder Structure

Create a Folder named Redux in src which contains the following folders

  1. Reducers
  2. Saga

APP — Foder Structure APP — Foder Structure

Import the Libraries

In the index.js, include the following dependencies

// Redux Library Packages  
 import { Provider } from “react-redux”;  
 import createSagaMiddleware from ‘redux-saga’;  
 import { createStore, applyMiddleware, compose } from “redux”;  
 import { logger } from ‘redux-logger’;

 // Custom redux Elements  
 import rootReducer from “./redux/reducers/index”;  
import rootSaga from “./redux/sagas/index”;

#### **Attach the Provider to the APP**

const userReducer = (state, action) =>{  
switch (action.type) {  
 return { …state, response: null, loading: true }  
 return { …state, response: action.response, loading: false }  
 return {  
 response: “No Response”  

#### **Add the Reducers**

const globalReducer = createStore(  
 applyMiddleware(sagaMiddleware, logger)  

The <Provider /> makes the Redux store available to any nested components that are using the useSelector hook.

 <Provider >  
   <App />  

Attach the Reducers to the providers

Get the Global State into your App

import { useSelector } from “react-redux”;

const globalState = useSelector(state => state);

Dispatch the Action on Event

const getUserData = () => {  
 // Get the Data for the User  
 dispatch({ type: “USER\_FETCH\_REQUESTED”})  

Attach An API Call to the Action

import { call, put, takeLatest } from ‘redux-saga/effects’  
const getRecords = (uid = null) => {  
const results = fetch(‘['](  
 .then(response => response.json());   
 return results;  

// worker Saga: will be fired on USER\_FETCH\_REQUESTED actions  
function\* fetchUser(action) {  
 try {  
 const json = yield call(getRecords, 400);  
 yield put({type: “USER\_FETCH\_SUCCEEDED”, response: json});  
 } catch (e) {  
 yield put({type: “USER\_FETCH\_FAILED”, message: e.message});  

function\* mySaga() {  
 yield takeLatest(“USER\_FETCH\_REQUESTED”, fetchUser);  

export default mySaga;

Final app.js file

Your final app.js will look like this.

import React from 'react';
import './App.css';
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";

function App() {
  const globalState = useSelector(state => state);
  const dispatch = useDispatch();
  const getUserData = () => {
    // Get the Data for the User
    dispatch({ type: "USER_FETCH_REQUESTED"})
  return (
    <div className="App">
      <header className="App-header">
       {/* Action will be triggred on clicked */}
      <button onClick={getUserData} style={{fontSize: '20px'}}>Click here to Get Data</button> 
    <h1>Hello Redux</h1> 
    <pre style={{fontSize: 20}}>
        {JSON.stringify(globalState.userReducer, null, 2)}

export default App;

Run the Code and See the Action

Open http://localhost:3000/

Working Example


img 1  mHz2T5ZmjIHbrcFXVpTpaw

GitHub Repo for this example


State Management is an very important aspect of React.

Redux is a library that handles the State in an organized one way manner.

It provides a Global Store to handle all state changes to the APP.

In this post, we have picked a fresh React app and implemented Redux with a sample action.

I have just set up the basic things, but you can expand it or directly use your project.