Библиотека Redux Actions JS: Redux (React)

Типичная работа с действиями сводится к созданию функции, принимающей данные и возвращающей объект действия:

const addTask = (task) => ({
  type: 'ADD_TASK',
  payload: { task },
});

Даже в небольших JS-приложениях, действий десятки, а то и сотни. В итоге появляется множество одинакового кода. К тому же есть проблема: если ошибиться с именем в редьюсере или даже при формировании действия, то система ничего не скажет и придётся отлаживать такую ситуацию руками.

По этой причине появились библиотеки-хелперы, помогающие сократить код. Самой популярной является redux-actions. Она разделяет процесс создания объекта действия на два этапа: определение действий и определение редьюсеров. В упрощённом виде это выглядит, как возврат функции из функции:

const createAction = (type) => {
  const actionCreator = (payload) => ({ type, payload });
  // Метод toString вызывается автоматически,
  // когда с объектом обращаются как со строкой
  actionCreator.toString = () => type;
  return actionCreator;
};

// объявляем в экшенах:
const addUser = createAction('USER_ADD');

// а используем в другом месте:
import { createStore } from 'redux';
import { addUser } from './actions.jsx';
import reducers from './reducers.js';

const user = /* get user from somewhere */;
const store = createStore(reducers);
store.dispatch(addUser({ user })); // здесь происходит установка payload

Теперь посмотрим, как это выглядит при использовании redux-actions.

  1. Определение действий:

    Функция createAction принимает тип действия (свойство type) и возвращает функцию, принимающую payload:

    import { createAction } from 'redux-actions';
    
    export const addUser = createAction('USER_ADD');
    
  2. Определение редьюсеров:

    Функция handleActions принимает объект, где ключами являются действия, а значениями — обработчики состояния и payload:

    import { combineReducers } from 'redux';
    import { handleActions } from 'redux-actions';
    import { addUser } from './actions.js';
    
    const defaultState = {};
    const addUserHandler = (state, { payload: { user } }) => {
      return { ...state, [user.id]: user }; // обновляем состояние
    };
    const handlers = {
      [addUser]: addUserHandler, // и свойство, и значение - функции
      // аналогично такой записи:
      // 'ADD_TASK': (state) => (/* handler */)
      // при установке свойства "под капотом" вызывается addUser.toString()
    };
    
    // создаём редьюсеры с обработчиками для каждого действия и начальным состоянием
    const userReducer = handleActions(handlers, defaultState);
    
    export default combineReducers({
      users: userReducer,
    });
    

Далее уже привычным образом в функцию createStore из Redux передаются редьюсеры, а функции действий используются при вызовах store.dispatch:

import { createStore } from 'redux';
import { addUser } from './actions.jsx';
import reducers from './reducers.js';

const user = /* get user from somewhere */;
const store = createStore(reducers);
store.dispatch(addUser({ user })); // здесь происходит установка payload

На первый взгляд может показаться, что кода стало больше, но на самом деле его столько же. Но появились и плюшки:

  • Каждый обработчик теперь отдельная функция, а значит их окружения не пересекаются, как в случае switch.
  • Не нужно описывать поведение по умолчанию, когда возвращается сам state.
  • Стало невозможным отправлять неправильное действие, так как каждая функция-обработчик формируется на основании функций, генерирующих действия.

В остальном всё остаётся по-прежнему. Эта библиотека не делает ничего кардинально нового, но позволяет сократить код и упростить отладку.


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
120
курсов
900
упражнения
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия

Фронтенд-разработчик

Разработка фронтенд-компонентов веб-приложений
16 июня 8 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».