Skip to main content

Connecting React and Redux with `react-redux`: `Provider` and `useSelector`, `useDispatch` #112

📖 Introduction​

Following our exploration of the Redux store, this article focuses on how to connect our Redux store to a React application using the react-redux library. We will learn about the <Provider> component and the useSelector and useDispatch hooks.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • The Redux store.
  • React Hooks.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ The <Provider> Component: How to use it to make the Redux store available to your application.
  • ✅ The useSelector Hook: How to use it to read data from the Redux store.
  • ✅ The useDispatch Hook: How to use it to dispatch actions to the Redux store.

🧠 Section 1: The Core Concepts of react-redux​

The react-redux library is the official bridge between React and Redux. It provides a few key components and hooks that make it easy to interact with the Redux store from your React components.

  • <Provider>: This component makes the Redux store available to any nested components that need to access it.
  • useSelector: This hook allows you to extract data from the Redux store state.
  • useDispatch: This hook returns a reference to the dispatch function from the Redux store. You can use it to dispatch actions.

💻 Section 2: Deep Dive - Implementation and Walkthrough​

Let's connect our to-do list application to our Redux store.

2.1 - The <Provider> Component​

First, we need to wrap our entire application with the <Provider> component and pass it our Redux store. We'll do this in our src/index.js file.

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

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

2.2 - The useSelector and useDispatch Hooks​

Now, we can use the useSelector and useDispatch hooks in our components to interact with the store.

Let's create a TodoList component that displays the list of to-dos and allows us to toggle their completion status.

// components/TodoList.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { toggleTodo } from '../actions';

function TodoList() {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  return (
    <ul>
      {todos.map(todo => (
        <li
          key={todo.id}
          onClick={() => dispatch(toggleTodo(todo.id))}
          style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
        >
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

export default TodoList;

Step-by-Step Code Breakdown:

  1. useSelector(state => state.todos): We use the useSelector hook to get the todos array from the Redux store.
  2. useDispatch(): We use the useDispatch hook to get the dispatch function.
  3. dispatch(toggleTodo(todo.id)): We dispatch the toggleTodo action when a to-do item is clicked.

💡 Conclusion & Key Takeaways​

In this article, we've learned how to connect a React application to a Redux store using the react-redux library. We've seen how to use the <Provider> component to make the store available to our application, and how to use the useSelector and useDispatch hooks to read data from the store and dispatch actions.

Let's summarize the key takeaways:

  • The <Provider> component makes the Redux store available to your application.
  • The useSelector hook is used to read data from the Redux store.
  • The useDispatch hook is used to dispatch actions to the Redux store.

Challenge Yourself: To solidify your understanding, try to create an AddTodo component that allows you to add new to-do items to the list by dispatching the addTodo action.

➡️ Next Steps​

This concludes our series on the basics of Redux. You now have a solid understanding of how to use Redux to manage the state of a React application. In the next series, we will explore Advanced Redux with Redux Toolkit.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • react-redux: The official library for connecting React and Redux.
  • <Provider>: A component from react-redux that makes the Redux store available to your application.
  • useSelector: A hook from react-redux that allows you to extract data from the Redux store state.
  • useDispatch: A hook from react-redux that returns the dispatch function from the Redux store.

Further Reading​