Creating the Redux Store

In the previous chapter, we deleted some files to create an empty structure we can use to build our application. In this chapter, we will build on top of that empty template.

We deleted a file called store.js, which contained the code for creating the Redux store. We will create our own Redux store based on the requirements of our application.

We will set up a Redux Store for a simple Todo application. For reference, this was the code from the store.js, which we deleted:

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

A Redux Store is created using the configureStore function, which is imported from the Redux Toolkit:

import { configureStore } from '@reduxjs/toolkit';

To recap, a reducer is a function responsible for handling a dispatched action and modifying the state based on that. A Redux store needs one or more reducers since reducers are the main method of modifying the application state based on an event.

In the above code, after importing a reducer from the counterSlice as counterReducer, we assigned it to the key counter inside the reducer object.

reducer: {
  counter: counterReducer,
}

Each feature in a Redux application might have a reducer for handling events. We can pass more reducers into the store by adding more keys to the reducer object:

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