How to Integrate Redux Toolkit in Your React Application?

Redux Toolkit is an official, recommended way to write Redux logic. It includes tools that help simplify the process of writing Redux applications.

Follow these steps to integrate Redux Toolkit into your React app:

• Step 1: Install Redux Toolkit and React-Redux:

npm install @reduxjs/toolkit react-redux

• Step 2: Create a Redux slice:

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1
  }
});

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

• Step 3: Configure the store:

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

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

• Step 4: Use the Provider to wrap your application:

import { Provider } from 'react-redux';
 
  

By following these steps, you can effectively integrate Redux Toolkit into your React application, simplifying your state management.