Step 1: Create Redux store

Theory

The Redux store is a single source of truth for the application's state. It holds the complete state tree of the application. The state in Redux is read-only, and the only way to change it is by dispatching actions. The store can be accessed and modified using Redux Toolkit's functions and hooks.

Practice

We have created the store.js file in the redux folder. We are ready to set up the entire store. Here's an example of how it can be done:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./reducers/counterReducer";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Code explanation: This code configures the Redux store using the configureStore function provided by the @reduxjs/toolkit package. Let's break it down step by step.

• Line 1: The code imports the configureStore function from the @reduxjs/toolkit package. This function simplifies the process of creating a Redux store by providing sensible defaults and built-in middleware.
• Line 2 imports the counterReducer from the ./reducers/counterReducer file. This reducer function handles the state changes for the "counter" slice of the Redux store. The logic inside of that file will be created further.
• Line 4-8: The configureStore function is called with an object as its argument. This object specifies the store's configuration options. In this case, the reducer option is the only option (Line 5).
  • The reducer option is an object that maps the state slices to their corresponding reducer functions. In this case, the counter slice of the state is mapped to the counterReducer function.
  • The configureStore function returns a Redux store object that contains the application's state and provides methods to interact with it.
• Line 10: Finally, the store object is exported as the default export of this module so that it can be used in other parts of the application.

Note

To summarize, this code sets up a Redux store with a single "counter" slice of the state, using the counterReducer to handle state changes. The resulting store is then exported for use in other parts of the application.

Step 2: Integrate Redux store into the app

Practice

Once the store is configured, it can be used in the app. We have to provide the store to the entire app. We will do it in the index.js file.

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App/App";
import store from "./redux/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>
);

Code explanation: Integration of the Redux store into a React app using the react-redux library. Let's break it down step by step.

• Line 3: Import the Provider component from the react-redux library.
• Line 5: Import the store object from a file called store.js , located in a folder called redux.
• Line 9-13: The Provider component wraps the App component. The Provider component is a higher-order component provided by react-redux that makes the Redux store available to the components in the app.
• Line 9: The store object is passed as a prop to the Provider component. This prop is named store, and its value is the imported store object.

Complete code