React Redux Walk-through

Redux is a state management tool that provides a way to have all the states of an application in one global place instead of having in each components.

Prerequisites:

React project setup - npx create-react-app app_name
Packages - npm i redux react-redux @reduxjs/toolkit

Methods used:

import { combineReducers, createStore, applyMiddleware } from "redux";
import { Provider, useSelector, useDispatch } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";

1. combineReducers

Used to combine multiple reducers and make it one to send it to the store.

const reducer = combineReducers({
    userData: userReducer,
    ...
    <more here>
});

2. createStore (deprecated)/configureStore

Used to create a store (redux state) using the combined reducer and also apply any middlewares if required to perform before the actions reaches the reducers.

const store = createStore(reducer, applyMiddleware(thunk, middelware2, middleware3, etc..));    // this is deprecated.
(OR)
const store = configureStore({
    reducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(middleware1, middleware2, etc...)
});

3. Provider

This component will wrap around the final component (in index.js) that is added to the DOM.
The store is made available to the entire application through this.

ReactDOM.render(
    <Provider store={store}>
        <App></App>
    </Provider>,
    document.getElementById("root")
);

4. useSelector

Used to access the state data from redux state.

const App = () => {
    const userData = useSelector((state) => state.userData);    //  where userData is the key name given in the combineReducers.
    const userId = userData.userId;

    return (
        <div>
            <h3>User id is {userId}</h3>
        </div>
    );
};

5. useDispatch

Used to dispatch the actions that will inturn modify the state data accordingly.

const App = () => {
    const dispatch = useDispatch();

    const updateUserId = (ev) => {
        dispatch(setUserId(ev.target.value));   //  action creator
        dispatch({type: "SET_USER_ID", payload: ev.target.value});  //  regular dispatch
    };

    return (
        <div>
            <input type="text" value={userId} onChange={updateUserId} />
        </div>
    );
};

Steps:

1. Declare the action type constants.

~/src/state/actionTypes.js

const actionTypes = {
    user: {
        SET_NEW_USER: "SET_NEW_USER",
        SET_USER_ID: "SET_USER_ID"
    },
    counter: {
        INCREASE_COUNT: "INCREASE_COUNT",
    },
};
export default actionTypes;

2. Declare the reducers.

~/src/state/reducers/counterReducer.js

import actionTypes from "../actionTypes";
const counterReducer = (state = 0, action = {}) => {
    switch (action.type) {
        case actionTypes.counter.INCREASE_COUNT:
            return state + action.payload.count;

        default:
            return state;
    }
};
export default counterReducer;

~/src/state/reducers/userReducer.js

import actionTypes from "../actionTypes";
const userReducer = (state = { userId: 1, userData: {} }, action = {}) => {
    switch (action.type) {
        case actionTypes.user.SET_NEW_USER:
            return {
                ...state,
                userData: { ...action.payload },
            };
        case actionTypes.user.SET_USER_ID:
            return {
                ...state,
                userId: action.payload,
            };
        default:
            return state;
    }
};
export default userReducer;

3. Combine the reducers.

~/src/state/reducers/index.js

    import { combineReducers } from "redux";
    import userReducer from "./userReducer";
    import counterReducer from "./counterReducer";

    const reducer = combineReducers({
        userData: userReducer,
        countData: counterReducer,
    });
    export default reducer;

4. Create the store by passing the combined reducer and the middlewares if any.

~/src/state/store.js

//  import { createStore, applyMiddleware } from "redux";
//  import thunk from "redux-thunk";
import { configureStore } from "@reduxjs/toolkit";
import reducer from "./reducers/index";

//  createStore is deprecated..
// const store = createStore(reducer, applyMiddleware(thunk));  

const store = configureStore({
    reducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
});

// To add additional middlewares,
// middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(middleware1, middleware2, etc...),  //  thunk is inbuilt in @reduxjs/toolkit

export default store;

5. Declare the actions as per requirment for the features.

~/src/state/actions/counterActions.js

import actionTypes from "../actionTypes";
const increaseCount = (countToIncrease) => {
    return {
        type: actionTypes.counter.INCREASE_COUNT,
        payload: { count: countToIncrease },
    };
};
export { increaseCount };

~/src/state/actions/userActions.js

import axios from "axios";
import actionTypes from "../actionTypes";
const getUser = (userId) => {
    return async (dispatchMethod, getState) => {
        const userResponse = await axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`);
        const userData = await userResponse.data;
        dispatchMethod({ type: actionTypes.user.SET_NEW_USER, payload: userData });
        return userData;
    };
};

const setUserId = (userId) => {
    return {
        type: actionTypes.user.SET_USER_ID,
        payload: userId,
    };
};

export { getUser, setUserId };

6. Implement the features and dispatch the actions as required.

~/src/components/counter/Counter.js

import { useSelector, useDispatch } from "react-redux";
import { increaseCount } from "./../../state/actions/counterActions";

const Counter = () => {
    const counterData = useSelector((state) => state.counterData);
    const dispatch = useDispatch();
    const handleIncreaseCount = (count = 1) => {
        dispatch(increaseCount(count));
    };

    return (
        <div>
            <h2>Counter</h2>
            <h3>{counterData}</h3>
            <button
                onClick={() => {
                    handleIncreaseCount(1);
                }}
                style={{ marginRight: "10px" }}
            >
                Increase count by 1
            </button>
            <button
                onClick={() => {
                    handleIncreaseCount(5);
                }}
            >
                Increase count by 5
            </button>
        </div>
    );
};
export default Counter;

~/src/App.js

import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";

import { getUser, setUserId } from "./state/actions/userActions";

import Profile from "./components/user/Profile";
import Counter from "./components/counter/Counter";

const App = () => {
    const userData = useSelector((state) => state.userData);
    const userId = userData.userId;
    const [showLoader, setShowLoader] = useState(false);
    const dispatch = useDispatch();

    const getUserInfo = () => {
        setShowLoader(true);
        dispatch(getUser(userId))
            .then((res) => {
                console.log(res);
            })
            .catch((err) => {
                console.log(err);
            })
            .finally(() => {
                setShowLoader(false);
            });
    };

    const updateUserId = (ev) => {
        dispatch(setUserId(ev.target.value));
    };

    return (
        <div>
            <input type="text" value={userId} onChange={updateUserId} />
            <h3>User id is {userId}</h3>
            <button onClick={getUserInfo}>Get user info</button>
            <br />
            {showLoader ? "loading..." : <Profile></Profile>}
            <hr />
            <Counter></Counter>
        </div>
    );
};

export default App;

7. Wrap the whole application with the provider and pass the store as a prop.

~/src/index.js

    import ReactDOM from "react-dom";
    import App from "./App";
    import { Provider } from "react-redux";
    import store from "./state/store";
    ReactDOM.render(
        <Provider store={store}>
            <App></App>
        </Provider>,
        document.getElementById("root")
    );

Persisting redux state on refresh

This requires changes in the following two files,
~/src/state/store.js
~/src/index.js

Steps:

1. `npm i redux-persist`

2. `~/src/state/store.js`

    //  NEW LINES START
    import { persistStore, persistReducer } from "redux-persist";
    import storage from "redux-persist/lib/storage";

    //  Setup persist config and persist reducer
    const persistConfig = {
        key: "persisted_state_data",
        storage,
    };
    const persistedReducer = persistReducer(persistConfig, reducer);
    //  NEW LINES END

    //  UPDATED LINE START
    //  Pass this persisted reducer to the store configurator and disable the serializableCheck.
    const store = configureStore({
        reducer: persistedReducer,
        middleware: (getDefaultMiddleware) => getDefaultMiddleware({
            serializableCheck: false,
        }),
    });
     //  UPDATED LINE END

    //  NEW LINE START
    // Create a persisted store along with the normal store and export both.
    const persistor = persistStore(store);
    //  NEW LINE END

    //  UPDATED LINE START
    export { persistor, store };
    //  UPDATED LINE END

3. `~/src/index.js`

//  Import persisted store and the regular store.
import { persistor, store } from "./state/store";
import { PersistGate } from "redux-persist/integration/react";

//  Within the redux provider wrap the app with the PersistGate component and pass the persistStore.
ReactDOM.render(
    <Provider store={store}>
        <PersistGate persistor={persistor}>
            <App></App>
        </PersistGate>
    </Provider>,
    document.getElementById("root")
);

Repo link: Github

P.S.

First post 🙏
Hopefully it saves someone a few hours of R&D.

Blog

React Redux Walk-through

Vinay P

Prerequisites:

Methods used:

1. combineReducers

2. createStore (deprecated)/configureStore

3. Provider

4. useSelector

5. useDispatch

Steps:

1. Declare the action type constants.

2. Declare the reducers.

3. Combine the reducers.

4. Create the store by passing the combined reducer and the middlewares if any.

5. Declare the actions as per requirment for the features.

6. Implement the features and dispatch the actions as required.

7. Wrap the whole application with the provider and pass the store as a prop.

Persisting redux state on refresh

Steps:

1. `npm i redux-persist`

2. `~/src/state/store.js`

3. `~/src/index.js`

P.S.

Join Our Newsletter. No Spam, Only the good stuff.

Related

React Redux Walk-through

Vinay P

Prerequisites:

Methods used:

1. combineReducers

2. createStore (deprecated)/configureStore

3. Provider

4. useSelector

5. useDispatch

Steps:

1. Declare the action type constants.

2. Declare the reducers.

3. Combine the reducers.

4. Create the store by passing the combined reducer and the middlewares if any.

5. Declare the actions as per requirment for the features.

6. Implement the features and dispatch the actions as required.

7. Wrap the whole application with the provider and pass the store as a prop.

Persisting redux state on refresh

Steps:

1. npm i redux-persist

2. ~/src/state/store.js

3. ~/src/index.js

P.S.

Join Our Newsletter. No Spam, Only the good stuff.

Related

1. `npm i redux-persist`

2. `~/src/state/store.js`

3. `~/src/index.js`