Setting Up a Redux Toolkit Store

Redux Toolkit (RTK) simplifies the process of setting up and managing a Redux store. This guide will walk you through setting up a store with RTK, ensuring you understand each step and why it’s necessary. By the end, you'll have a fully functional Redux store that you can use in your React applications.

Introduction to Redux Toolkit

Redux Toolkit is the official, recommended way to write Redux logic. It includes tools and best practices to simplify your Redux code, such as:

• createSlice for creating reducers and actions

• configureStore for setting up the store with middleware and DevTools

• createAsyncThunk for handling async logic

Installing Redux Toolkit

First, you need to install Redux Toolkit along with React-Redux:

npm

npm install @reduxjs/toolkit react-redux

yarn

yarn add @reduxjs/toolkit react-redux

Creating a Slice

A slice is a collection of Redux reducer logic and actions for a single feature of your app. Use the createSlice function to define your initial state, reducers, and actions.

// features/counter/counterSlice.js

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

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

In this example, we create a counterSlice with an initial state and three reducers: increment, decrement, and incrementByAmount.

Configuring the Store

Next, configure the store using the configureStore function. This function simplifies the store setup and automatically includes recommended middleware.

// app/store.js

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

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

export default store;

Here, we configure the store to use the counterReducer created earlier.

Providing the Store to Your React Application

To use the store in your React application, wrap your app component with the Provider component from react-redux, passing the store as a prop.

// index.js

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

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

This step makes the Redux store available to any nested components that need to access it.

Using the Store in Your Components

With the store configured and provided to your app, you can now use Redux state and actions in your components. The useSelector hook allows you to read data from the store, and the useDispatch hook allows you to dispatch actions.

// features/counter/Counter.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';

const Counter = () => {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(2))}>Increment by 2</button>
    </div>
  );
};

export default Counter;

In this example, the Counter component reads the current counter value from the Redux store and dispatches actions to modify the counter state.

Conclusion

Setting up a store with Redux Toolkit involves installing the necessary packages, creating slices, configuring the store, and using the store in your React components. Redux Toolkit simplifies the Redux setup and encourages best practices, making your state management code more maintainable and easier to understand.