How to Build Redux Store and Manage Complex State in ReactJS

After installing the required modules.

1. First, create a store using the configureStore method provided by the redux toolkit inside the store.js file. This will be your store but we haven’t created reducers.
2. Now wrap up the whole application using provider which provide the store we created to the application.
3. Now create slices for the store, use createSlice method from toolkit to create a slice which contains..
   • Name of slice
   • Initial states
   • Reducer which then contains action
4. Export the reducer and actions
5. Imort redcuer inside store to register it.
6. Now its time to use it, select the state inside component using hook and import corresponding actions.
7. When update required, dispatch the action, this will update the state in store and inside component.

Steps to Create a React Application And Installing Module:

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

npx create-react-app redux_store

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

cd redux_store

Step 3: Install React Redux Module:

npm install @reduxjs/toolkit react-redux

Project Structure:

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

"dependencies": {
    "@reduxjs/toolkit": "^2.2.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^9.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

React Redux is a JavaScript library that is used to create and maintain state in React Applications efficiently.

Here React Redux solves the problem by creating a redux store that stores the state and provides methods to use the state inside any component directly or to manipulate the state in a defined manner.