Redux toolkit crash course | Chai aur React Series

Introduction

This tutorial provides a comprehensive overview of using Redux Toolkit in your React applications. Redux Toolkit simplifies state management and enhances the development process. This guide will walk you through the essential steps to get started with Redux Toolkit, ensuring you understand its core concepts and how to implement it effectively.

Step 1: Setting Up Your Project

1. Create a New React Application

   • Use Create React App to set up your project:

     npx create-react-app my-app
     cd my-app
     

2. Install Redux Toolkit and React-Redux

   • Run the following command in your project directory:

     npm install @reduxjs/toolkit react-redux
     

Step 2: Creating a Redux Slice

1. Create a Slice File

   • Inside the src directory, create a new folder called slices, and add a file named counterSlice.js.

2. Define Your Slice

   • In counterSlice.js, import createSlice and define your slice:

     import { createSlice } from '@reduxjs/toolkit';
     
     const counterSlice = createSlice({
       name: 'counter',
       initialState: { value: 0 },
       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;
     

Step 3: Configuring the Store

1. Create a Store File

   • Create a file named store.js in the src directory.

2. Set Up the Store

   • In store.js, import configureStore and your slice reducer:

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

Step 4: Integrating Redux with React

1. Provide the Store to Your Application
   • Wrap your application with the Provider in index.js:

     import React from 'react';
     import ReactDOM from 'react-dom';
     import { Provider } from 'react-redux';
     import store from './store';
     import App from './App';
     
     ReactDOM.render(
       <Provider store={store}>
         <App />
       </Provider>,
       document.getElementById('root')
     );
     

Step 5: Using Redux State in Components

1. Access State and Dispatch Actions
   • In your component (e.g., Counter.js), use useSelector and useDispatch from react-redux:

     import React from 'react';
     import { useSelector, useDispatch } from 'react-redux';
     import { increment, decrement } from './slices/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>
         </div>
       );
     };
     
     export default Counter;
     

Conclusion

In this tutorial, you learned how to set up Redux Toolkit in a React application, create a slice for state management, configure the Redux store, and connect your components to the Redux state. As a next step, explore more advanced features of Redux Toolkit, such as asynchronous actions using createAsyncThunk or integrating middleware for enhanced functionality. For further resources and community support, visit the provided links in the video description.