Theory

In Redux, the store acts as the sole source of truth for the state of an application. It contains the complete state tree and is immutable. To modify the state, actions must be dispatched. By using Redux Toolkit's functions and hooks, you can access and modify the store easily.

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.