Open In App

How to set initial state in Redux ?

Improve
Improve
Like Article
Like
Save
Share
Report

Redux is the tool for the management of the state throughout the whole application globally. We can set initial states in redux as a store that can only be modified with the help of the actions. But, this state must be specified somewhere first to use it. 

Prerequisites

Approach

We prefer to declare and set initial state in Redux at the reducer files. Then we use that reducer in the store and provide that store use inside the whole application. This state in reducers will be modified only using the defined action.

Let’s create an application in react with redux and set the initial state in Redux:

Steps to create React Application

Step 1: Create a React application using the following command:

npx create-react-app example

Step 2: After creating your project folder i.e. example, move to it using the following command:

cd example

Step 3: Module installation, now from the root directory of your project in the terminal, run the following command

npm i redux react-redux

Project Structure:

project structure

The updated dependencies in package.json file will look like:

{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.1.3",
"react-scripts": "5.0.1",
"redux": "^4.2.1",
"web-vitals": "^2.1.4"
},
}

Example: Initialise two states in Reducers and manage them from React components with redux store and defined actions in the redux actions.

Javascript




// Filename - App.js
 
import React from "react";
import { Provider } from "react-redux";
import Content from "./components/content";
import Header from "./components/header";
import store from "./redux/store";
 
function App() {
    return (
        <Provider store={store}>
            <div
                style={{
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    justifyContent: "center",
                    minHeight: "100vh",
                }}
            >
                <h1 style={{ color: "green" }}>
                    GeeksforGeeks
                </h1>
                <h2>States with Initial Values in Redux</h2>
                <div
                    style={{
                        padding: "2%",
                        boxShadow: "3px 5px 10px grey",
                        borderRadius: "20px",
                        minWidth: "33rem",
                        textAlign: "center",
                    }}
                >
                    <Header />
                    <Content />
                </div>
            </div>
        </Provider>
    );
}
 
export default App;


Javascript




// Filename - redux/store.js
 
import { createStore } from "redux";
import rootReducer from "./reducers/rootreducer";
 
const store = createStore(rootReducer);
 
export default store;


Javascript




// Filename - redux/reducers/rootreducer.js
 
import { combineReducers } from "redux";
 
import auth from "./reducer";
import count from "./reducer";
 
export default combineReducers({
    auth,
    count
});


Javascript




// Filename - redux/reducers/reducer.js
import produce from "immer";
 
const INITIAL_STATE = {
    signed: false,
    counter: 0
};
 
export default function auth(state = INITIAL_STATE, action) {
    return produce(state, draft => {
        switch (action.type) {
            case "@auth/LOGIN":
                draft.signed = true;
                break;
            case "@auth/LOGOUT":
                draft.signed = false;
                break;
            case "@auth/INCREMENT":
                draft.counter += action.payload;
                break;
            case "@auth/DECREMENT":
                draft.counter -= action.payload;
                break;
            default:
        }
    });
}


Javascript




// Filename - redux/actions/action.js
 
export function login() {
    return {
        type: "@auth/LOGIN",
    };
}
 
export function logout() {
    return {
        type: "@auth/LOGOUT",
    };
}
 
export function increment(number) {
    return {
        type: "@auth/INCREMENT",
        payload: number,
    };
}
 
export function decrement(number) {
    return {
        type: "@auth/DECREMENT",
        payload: number,
    };
}


Javascript




// Filename - components/header.js
 
import React from "react";
import { useSelector } from "react-redux";
 
export default function Header() {
    const signed = useSelector(
        (state) => state.auth.signed
    );
 
    return (
        <div signed={signed}>
            <h3>Logged in: {String(signed)}</h3>
        </div>
    );
}


Javascript




// Filename - components/content.js
 
import React from "react";
import { useSelector, useDispatch } from "react-redux";
 
import {
    login,
    logout,
    increment,
    decrement,
} from "../redux/actions/actions";
 
export default function Main() {
    const count = useSelector(
        (state) => state.count.counter
    );
    const signed = useSelector(
        (state) => state.auth.signed
    );
    const dispatch = useDispatch();
 
    return (
        <div
            style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
            }}
        >
            {signed ? (
                <button onClick={() => dispatch(logout())}>
                    LOGOUT
                </button>
            ) : (
                <button onClick={() => dispatch(login())}>
                    LOGIN
                </button>
            )}
            <h3>Total count: {count}</h3>
            <h4>Change the state by</h4>
 
            <div
                style={{ margin: "auto", display: "flex" }}
            >
                <button
                    style={{
                        margin: "20px",
                        padding: "10px",
                        fontSize: "15px",
                    }}
                    onClick={() => dispatch(decrement(2))}
                >
                    -2
                </button>
                <button
                    style={{
                        margin: "20px",
                        padding: "10px",
                        fontSize: "15px",
                    }}
                    onClick={() => dispatch(increment(2))}
                >
                    +2
                </button>
            </div>
        </div>
    );
}


Step to run the application: Use the following command to run the application:

npm start

Output: There are two initial states in this example which are defined in the reducer file of redux.

  • signed: false,
  • counter: 0

which are changing by actions.

Peek-2023-10-18-10-56



Last Updated : 02 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads