How to set initial state in Redux ?
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
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
import { createStore } from "redux" ;
import rootReducer from "./reducers/rootreducer" ;
const store = createStore(rootReducer);
export default store;
|
Javascript
import { combineReducers } from "redux" ;
import auth from "./reducer" ;
import count from "./reducer" ;
export default combineReducers({
auth,
count
});
|
Javascript
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
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
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
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.
Last Updated :
02 Nov, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...