Кастомный хук для диспатчинга Redux экшенов

Часто, вызывая action creator, мы забываем обернуть его в dispatch(), а вместо этого вызываем как обычная функцию. Таким образом action не доходит до редьюсера.

addProductToCart(product); // не верно
dispatch(addProductToCart(product)); // верно

Мы создадим собственный хук, в котором будет выполняться обертывание вызова функции в dispatch(), чтобы мы могли отправлять наши экшены, вызывая их как обычные функции с уже встроенным диспатчингом.

import { useCallback } from 'react';
import { useDispatch } from 'react-redux';

export const useWithDispatch = (fn) => {
  const dispatch = useDispatch();

  return useCallback(
    payload => () => dispatch(fn(payload)),
    [dispatch, fn]
  ) 
}

Реализация довольно проста. useWithDispatch — это функция высшего порядка, поскольку она принимает функцию (action creator) в качестве аргумента и возвращает другую функцию, которая при вызове вызовет переданную функцию, обернутую с помощью dispatch(). Обязательно запоминаем функцию обратного вызова с помощью useCallback.

Допустим, мы работаем над приложением списка задач, и у нас есть действие addTask(), которое берет текст задачи и добавляет его в список задач:

// actions.js

const addTaskAction = (text) => {
  return {
    type: 'ADD_TASK',
    payload: {
      id: 'some-id',
      text
    }
  }
}

В компоненте вызов будет выглядеть следующим образом.

import { addTaskAction } from './actions';

export const Component = () => {
  const addTask = useWithDispatch(addTaskAction);

  const handleClick = () => {
    addTask('Learn Redux');
  }

  // ...
}

Итоги

Я надеюсь, что вы нашли этот пост полезным. Вам по-прежнему нужно помнить о передаче создателей действий (action creator) в useWithDispatch, но будет легче запомнить, что вы делаете это в самом начале, а не при их вызове.

1. Все что нужно знать о Redux

Это видео - быстрый старт в Redux, и оно поможет понять все основные концепции Redux. Здесь мы разберем что такое Redux, основные понятия Redux и три его принципа. Поговорим об Actions, Dispatch, Reducer, Store и узнаем о Redux data flow. Смотреть на Rutube

2. Добавляем Redux в React приложение быстро: useSelector, useDispatch

В этом видео добавляем Redux в ReactJS приложение todo app. Пишем редьюсеры (reducers) и диспатчим экшены (dispatch actions). Используем redux hooks API, такие как useSelector, useDispatch. Смотреть на Rutube

3. Что такое Action Creator в Redux?

В этом видео пишем action creators в React Redux приложении и используем их в dispatch. Пишем функцию для создания action creators. Смотреть на Rutube

4. Что такое Redux Middleware?

В этом видео разбираем middleware в Redux. Пишем кастомные middleware для логирования и отложенного выполнения действия. Смотреть на Rutube

5. Функция next в Redux Middleware

В этом видео подробно разбираем функцию next в middleware Redux, смотрим как получить значение возвращенное из dispatch и пишем функцию для получения значений всех middleware. Смотреть на Rutube Исходный код