🚀 React + Redux Toolkit - Connecting Redux to React | Redux Hooks Explained

Screenshot from the tutorial

Connecting Redux to React with Redux Toolkit: A Quick Guide

In today's fast-paced development environment, managing state efficiently is crucial for building responsive applications. Redux Toolkit simplifies the process of integrating Redux with React, making it easier to manage application state. This blog post will guide you through the process of connecting Redux to React using Redux Toolkit, leveraging hooks for a modern and efficient approach.

What is Redux Toolkit?

Redux Toolkit is the official, recommended way to write Redux logic. It provides tools and best practices for efficient Redux development, including:

• Simplified store setup
• Built-in support for immutability
• A powerful createSlice function to define actions and reducers
• Built-in middleware for handling asynchronous logic

Prerequisites

Before diving into the code, ensure you have the following:

• Basic knowledge of React
• Familiarity with Redux concepts
• Node.js and npm installed on your machine

Setting Up Your Project

To get started, create a new React application and install Redux Toolkit and React-Redux:

npx create-react-app redux-toolkit-demo
cd redux-toolkit-demo
npm install @reduxjs/toolkit react-redux

Creating a Redux Slice

The first step in connecting Redux to React is to create a Redux slice. A slice represents a portion of the Redux state and includes the reducer and actions.

Let's create a simple counter slice. In your src directory, create a folder named features, and inside it, create a file called counterSlice.js.

// src/features/counterSlice.js
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;

Explanation of the Code

• createSlice: This function simplifies the process of creating actions and reducers. It takes an object with name, initialState, and reducers.
• Reducers: Functions that update the state based on the action dispatched.

Configuring the Redux Store

Next, you need to configure the Redux store. Create a file called store.js in the src directory.

// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counterSlice';

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

export default store;

Explanation of the Code

• configureStore: This utility function sets up the Redux store with good defaults.

Connecting Redux to React

Now that we have our slice and store set up, it's time to connect Redux to our React application. Open src/index.js and wrap your application with the Provider component from react-redux.

// src/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')
);

Using Redux Hooks in a Component

Now we can use Redux state in our React components. Open src/App.js and modify it to use the useSelector and useDispatch hooks.

// src/App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './features/counterSlice';

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

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

export default App;

Explanation of the Code

• useSelector: This hook allows you to extract data from the Redux store state.
• useDispatch: This hook gives you access to the dispatch method to send actions to the store.

Running Your Application

Now that everything is set up, run your application:

npm start

You should see a simple counter application where you can increment and decrement the count using Redux Toolkit.

Conclusion

Using Redux Toolkit to connect Redux to React streamlines state management and reduces boilerplate code. By following the steps outlined in this tutorial, you should have a solid understanding of how to create a Redux slice, configure a Redux store, and utilize Redux hooks in your React components.

As you continue developing applications, consider exploring more advanced features of Redux Toolkit, such as asynchronous actions with createAsyncThunk and middleware integration. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios