Вивчайте Підключення Redux до Компонентів React

Свайпніть щоб показати меню

Теорія

Для встановлення зв'язку між компонентами React і сховищем Redux можна використовувати хук useSelector для доступу до стану та хук useDispatch для відправлення дій.

Практика

Тепер підключимо компонент Counter до сховища Redux.

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "../redux/actions/counterAction";

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

  const handleIncrement = () => {
    dispatch(increment());
  };

  const handleDecrement = () => {
    dispatch(decrement());
  };

  return (
    <div>
      <h2>Counter Value: {counter}</h2>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
};

export default Counter;

Пояснення коду:

Рядок 2: Імпорт необхідних хуків useSelector та useDispatch з бібліотеки react-redux. Ці хуки забезпечують зв'язок між React і Redux;
Рядок 3: Імпорт творців дій increment та decrement з файлу ../redux/actions/counterAction. Ці дії будуть відправлені для оновлення стану лічильника у сховищі Redux;
Рядок 6: Хук useSelector використовується для доступу до стану counter зі сховища Redux. Як аргумент передається селекторна функція, яка повертає потрібне значення стану;
Рядок 7: Хук useDispatch використовується для доступу до функції dispatch Redux. Він посилається на функцію dispatch, яка використовується для відправлення дій у сховище Redux;
Рядки 9-11: Визначення обробника події handleIncrement, який викликається при натисканні кнопки "Increment". Усередині обробника за допомогою функції increment відправляється дія dispatch у сховище Redux;
Рядки 13-15: Визначення обробника події handleDecrement, який викликається при натисканні кнопки "Decrement". Усередині обробника за допомогою функції decrement відправляється дія dispatch у сховище Redux;
Рядки 17-23: Відображення елементів JSX, включаючи поточне значення лічильника та кнопки для збільшення і зменшення. Відповідні обробники подій підключаються до атрибуту onClick кнопок.

Примітка

Цей код підключає компонент React (Counter) до Redux. Використовується useSelector для доступу до стану лічильника та useDispatch для відправлення дій з оновлення стану. Компонент відображає значення лічильника та надає кнопки для його збільшення і зменшення. Натискання на ці кнопки викликає дії, які оновлюють сховище Redux.