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

React компоненты в процессе своего существования проходят разные стадии, это называется жизненным циклом компонентов. Эти этапы можно разделить на три основных этапа:

• Монтирование: компонент создается и вставляется в модель DOM
• Обновление: компонент повторно визуализируется из-за изменений в его пропсах или состоянии.
• Размонтирование: компонент удаляется из модели DOM

В этой статье мы рассмотрим три основных варианта использования хука useEffect: с пустым массивом зависимостей, с массивом зависимостей со значениями и без массива зависимостей. Давайте начнем!

1. useEffect с пустым массивом зависимостей

Когда вы передаете пустой массив зависимостей в useEffect, это означает, что эффект запускается только один раз, когда компонент монтируется. Это полезно для выполнения одноразовых инициализаций или подписки на события, которые не изменяются со временем. Вариантом использования для этого может быть получение данных из API.

import { useEffect, useState } from "react";

export default function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://mock-api.com")
      .then((response) => response.json())
      .then((apiData) => {
        setData(apiData);
      });
  }, []);

  return (
    <div>
      {data && data.message}
    </div>
  );
}

В этом примере хук useEffect используется для получения данных из API, затем данные сохраняются в состоянии с помощью функции setData. Так как массив зависимостей пуст, этот фрагмент кода будет выполняться только один раз при монтировании компонента.

2. useEffect со значениями в массиве зависимостей

Когда вы предоставляете массив зависимостей с определенными значениями, эффект выполняется, когда компонент монтируется и когда эти значения изменяются. Это позволяет выборочно реагировать на изменения в пропсах или состоянии компонента. Примером использования для этого может быть функция поиска.

import React, { useState, useEffect } from 'react';

function FilterableList({ items }) {
  const [filter, setFilter] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);

  useEffect(() => {
    const filtered = items.filter(item => item.toLowerCase().includes(filter.toLowerCase()));
    setFilteredItems(filtered.length !== 0 ? filteredItems : items);
  }, [filter, items]);

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
}

В этом примере хук useEffect фильтрует список элементов на основе вводимых пользователем данных. Эффект запускается при каждом изменении значений фильтра или элементов, обеспечивая соответствующее обновление отфильтрованного списка.

3. useEffect без массива зависимостей

Когда вы используете хук useEffect без предоставления массива зависимостей (не пустого массива, а вообще без массива), это означает, что эффект будет выполняться после каждого рендеринга, то есть при монтировании и при каждом обновлении компонента из-за изменений в его пропсах или состоянии. Это может привести к проблемам с производительностью и неожиданному поведению, особенно если вы обновляете состояние в эффекте. Честно говоря, сложно придумать хороший пример из реальной жизни, когда это использовать.

Итоги

• Если вы используете пустой массив зависимостей, блок кода будет выполнен только один раз, во время монтирования компонента.
• Если вы передаете значения в массив зависимостей, это вызовет эффект при монтировании компонента и при изменении конкретных значений в массиве зависимостей.
• Если вы используете useEffect без массива зависимостей, он будет выполнять код после каждого рендеринга.

Поняв эти три основных варианта использования useEffect, вы сможете эффективно справляться с побочными эффектами и жизненными циклами компонентов. Не забывайте использовать эти знания с умом и адаптировать их к потребностям ваших проектов.