Setting up Redux Toolkit with React in React JS

Redux Toolkit is a modern approach to working with Redux, offering a set of tools and utilities that simplify Redux development. It reduces the boilerplate code typically associated with Redux, making it easier to configure the store, manage state, and handle asynchronous actions.

In this article, we will guide you through the process of setting up Redux Toolkit with a React application, step by step.

1. Installing Redux Toolkit and React-Redux

To get started with Redux Toolkit, you need to install it along with React-Redux. React-Redux provides bindings to connect your React components with the Redux store.

Example 1: Installing Redux Toolkit and React-Redux

        
          npm install @reduxjs/toolkit react-redux

After running the above command, you are ready to set up Redux Toolkit in your React application.

2. Creating the Redux Slice

A slice in Redux Toolkit combines the state, reducers, and actions for a specific feature of the application. You can create a slice using the createSlice function, which automatically generates action creators and action types for you.

Example 2: Creating a Counter Slice

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

          // Define a slice for the counter
          const counterSlice = createSlice({
            name: 'counter',
            initialState: { value: 0 },
            reducers: {
              increment: state => { state.value += 1 },
              decrement: state => { state.value -= 1 },
              reset: state => { state.value = 0 }
            }
          });

          // Export actions generated by createSlice
          export const { increment, decrement, reset } = counterSlice.actions;

          // Export the reducer to be used in the store
          export default counterSlice.reducer;

In this example, we use createSlice to create a counter slice. The slice defines:

  • name: The name of the slice, used to prefix the action types.
  • initialState: The initial state for the slice.
  • reducers: The reducer functions that modify the state based on the dispatched actions.

Redux Toolkit automatically generates action creators such as increment, decrement, and reset based on the reducer functions.

3. Configuring the Redux Store

To set up the Redux store, we use the configureStore function provided by Redux Toolkit. This function simplifies store setup and applies necessary middleware such as redux-thunk for handling async actions.

Example 3: Setting Up the Store

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

          // Create the Redux store
          const store = configureStore({
            reducer: {
              counter: counterReducer
            }
          });

          export default store;

In this example, we configure the Redux store and add the counterReducer (generated by the createSlice) to the store’s reducer object. This allows the Redux store to manage the state for the counter feature.

4. Connecting the Store to the React App

Once the store is configured, you need to connect it to your React application using the Provider component from react-redux. The Provider component makes the Redux store available to your React components.

Example 4: Connecting the Store with the Provider

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

          ReactDOM.render(
            
              
            ,
            document.getElementById('root')
          );

In this example, we wrap the App component with the Provider component and pass the Redux store to it. This allows any component in the app to access the Redux store using the useSelector and useDispatch hooks.

5. Using Redux in React Components

Now that the Redux store is connected to the React application, you can access the state and dispatch actions using the useSelector and useDispatch hooks, respectively.

Example 5: Using Redux in a Counter Component

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

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

            return (
              

                
Count: {count}

                
                
                
              

            );
          };

          export default Counter;

In the example above, we use useSelector to access the counter value from the Redux state and display it in the component. We use useDispatch to dispatch actions like increment, decrement, and reset when the respective buttons are clicked.

6. Conclusion

Setting up Redux Toolkit with React is straightforward and reduces the complexity associated with traditional Redux setup. With tools like createSlice, configureStore, and Provider, you can quickly configure the store, manage state, and dispatch actions in your React components.

Redux Toolkit is designed to be developer-friendly and follows best practices, allowing you to manage your application's state in a more efficient and less error-prone way.

By using Redux Toolkit, you can focus on building your app’s features rather than worrying about managing Redux configuration and boilerplate.




Advertisement