Видео-курс по Redux Thunk

Что такое Redux Thunk? В случае с Redux можно выполнять только простые обновления. Это делелаеся при помощи диспатча actions. Middleware расширяют эти возможности и можно выполнять асинхронные действия. Redux Thunk позволяет выполнять сайд эффекты - сложные синхронные действия, и простые асинхронные действия.

1. Что такое Redux Thunk?

В этом видео добавляем Redux Thunk к проекту, смотрим исходники Redux Thunk, пишем thunk и диспатчим. Смотреть на Rutube

2. Что такое композиция в Redux Thunk?

В этом видео применяем композицию в Redux Thunk для последовательного и параллельного запроса данных, используем кэш для предотвращения запросов и чтения данных из state. Как организовать цепочку вызовов с Thunk и Composition API? Смотреть на Rutube

3. Пишем систему нотификаций с Redux Thunk

В этом видео пишем систему нотификаций при помощи Redux Thunk с возможностью отключения получения нотификаций. Смотреть на Rutube

4. Внедрение зависимостей в Redux Thunk

В этом видео внедряем зависимости в Redux Thunk middleware. Смотреть на Rutube

Часто, вызывая 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, но будет легче запомнить, что вы делаете это в самом начале, а не при их вызове.