In this tutorial, we will learn how to create a Redux Store in React application. At the same time, we will share how to use the Redux store in React to manage the complex states.
Apart from that, we will also learn how to create a slice state using the redux toolkit module.
Redux is a popular open-source JavaScript library used for managing the application state.
Redux empowers React and allows you to create user interfaces. React Redux is the official React binding for Redux.
Redux provides a store that we integrate into React using the Provider component. It lets you read the data from a Redux Store and dispatch Actions to the Store to update the state.
How to Build Redux Store and Manage Complex State in React Js
- Step 1: Create React Application
- Step 2: Install React Redux Module
- Step 3: Wrap App with Redux Provider
- Step 4: Create Redux Store
- Step 5: Create Redux State Slice Reducer
- Step 6: Register State Slice in Store
- Step 7: Use Redux State in React Component
- Step 7: View App on Browser
Create React Application
Open the terminal, enter the given command on the console then run the command to install the create-react-app tool:
npm install create-react-app --global
Now, we need to execute the given command to create a brand new react application.
npx create-react-app react-demo
Move into the project folder:
cd react-demo
Install React Redux Module
To create a redux store in React, we will simultaneously install react-redux and redux toolkit.
npm install react-redux @reduxjs/toolkit --legacy-peer-deps
Wrap App with Redux Provider
React Redux offers a Provider component. It proliferates the Redux store in the React app and allows making the store available throughout the react app.
Also, import the redux store component, and add to the Provider component.
Add the given code into the src/index.js file:
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import { Provider } from 'react-redux'
import store from './store/index'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
)
Create Redux Store
In the src directory, create the store folder, and create a new file named index.js.
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../reducers/counterSlice'
export default configureStore({
reducer: {
counter: ,
},
})
configureStore(): wraps createStore to provide simplified configuration options and good defaults.
It automatically adds or combines your slice reducers and adds whatever Redux middleware you supply. It includes redux-thunk by default and enables the use of the Redux DevTools Extension.
Create Redux State Slice Reducer
Next, make reducers/ folder, then create a file named counterSlice.js and insert the given code into it.
import { createSlice } from '@reduxjs/toolkit'
export const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0,
},
reducers: {
increment: (state) => {
state.value += 1
},
decrement: (state) => {
state.value = state.value - 1
},
},
})
export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer
createSlice(): accepts an object of reducer functions, a slice name, and an initial state value, and automatically generates a slice reducer with corresponding action creators and action types.
Register State Slice in Store
In this step, we will add the slice reducer to the counter property. Insert the following code into the store/index.js file.
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../reducers/counterSlice'
export default configureStore({
reducer: {
counter: counterReducer,
},
})
Use Redux State in React Component
Open the App.js file and add the following code into the file. In this file, we will show you how to use React Redux store in React component.
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './reducers/counterSlice'
function App() {
const count = useSelector((state) => state.counter.value)
const dispatch = useDispatch()
return (
<div className="App container mt-5 text-center">
<h2 className="mb-3">React Js Redux Store with Slice State Examle</h2>
<p className="h1">{count}</p>
<button
onClick={() => {
dispatch(increment())
}}
className="me-2 btn btn-primary"
>
Increment
</button>
<button
onClick={() => {
dispatch(decrement())
}}
className="me-2 btn btn-danger"
>
Decrement
</button>
</div>
)
}
export default App
View App on Browser
In this step, we will show you how to run the development server.
npm start
After the above command invoked, test the app using the given url.
http://localhost:3000
Conclusion
In this tutorial, you have discovered how to set up the redux store in React js application using the React Redux, and Redux Toolkit modules.
Redux manages the data in React through a unidirectional data flow model. React Redux is easy to implement in React. It ideally subscribes to the Redux store and checks if the data of your component changed and re-renders your component.