Типичное действие выглядит так:

{
  type: 'TODO_ADD',
  payload: {
    /* data */
  }
}

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

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

  1. Определение действий.
  2. Определение хранилища.

Начнём с действий:

import { createAction } from 'redux-actions';

export const addUser = createAction('USER_ADD');
export const updateUser = createAction('USER_UPDATE');

Функция createAction формирует новую функцию, которая при вызове возвращает действие (объект { type: ... }). Эта функция принимает на вход данные, которые попадают в свойство payload.

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

import { addUser } from './actions'
import reducers from './reducers'

const user = /* get user from somewhere */;
const store = createStore(reducers);
store.dispatch(addUser({ user }));

Теперь посмотрим редьюсеры:

import { handleActions } from 'redux-actions';
import * as actions from './actions';

const users = handleActions({
  [actions.addUser](state, { payload: { user } }) {
    return { ...state, [user.id]: user };
  },
}, {});

export default combineReducers({
  users,
});

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

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

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

Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Node, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →