Действия

Сначала определим некоторые действия.

Действия — это полезные данные, которые отправляют данные из вашего приложения в ваш хранилище. Они являются единственным источником информации для хранилища. Вы отправляете их в хранилище с помощью store.dispatch().

Вот пример действия, которое представляет добавление нового элемента списка дел:

const ADD_TODO = 'ADD_TODO'

{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}

Действия — это обычные JavaScript-объекты. Действия должны иметь свойство type , которое указывает тип выполняемого действия. Типы обычно определяются как строковые константы. Когда ваше приложение станет достаточно большим, вы можете переместить их в отдельный модуль.

import { ADD_TODO, REMOVE_TODO } from '../actionTypes'

Примечание о шаблонном коде

Вам не нужно определять константы типов действий в отдельном файле, или даже определять их вообще. Для небольшого проекта проще использовать строковые литералы для типов действий. Однако есть некоторые преимущества явного объявления констант в более крупных кодовых базах. Прочитайте Уменьшение шаблонного кода для получения более практических советов по поддержанию чистоты кодовой базы.

Помимо type, структура объекта действия полностью зависит от вас. Если вы заинтересованы, ознакомьтесь с Flux Standard Action, чтобы узнать рекомендации по построению действий.

Мы добавим ещё один тип действия, чтобы описать отметку пользователя о выполнении дела. Мы ссылаемся на конкретное дело по index , так как храним их в массиве. В реальном приложении целесообразнее генерировать уникальный идентификатор каждый раз, когда создаётся что-то новое.

{
  type: TOGGLE_TODO,
  index: 5
}

Хорошо передавать как можно меньше данных в каждом действии. Например, лучше передать index , чем весь объект дела.

Наконец, мы добавим ещё один тип действия для изменения текущих видимых дел.

{
  type: SET_VISIBILITY_FILTER,
  filter: SHOW_COMPLETED
}

Создатели действий

Создатели действий — это именно то, что они представляют собой — функции, которые создают действия. Легко перепутать термины «действие» и «создатель действия», поэтому старайтесь использовать правильный термин.

В Redux создатели действий просто возвращают действие:

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

Это делает их портативными и простыми в тестировании.

В традиционном Flux создатели действий часто запускают отправку при вызове, как показано ниже:

function addTodoWithDispatch(text) {
  const action = {
    type: ADD_TODO,
    text
  }
  dispatch(action)
}

В Redux это не так.
Вместо этого, чтобы фактически инициировать отправку, передайте результат функции dispatch() :

dispatch(addTodo(text))
dispatch(completeTodo(index))

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

const boundAddTodo = text => dispatch(addTodo(text))
const boundCompleteTodo = index => dispatch(completeTodo(index))

Теперь вы сможете вызывать их напрямую:

boundAddTodo(text)
boundCompleteTodo(index)

К функции dispatch() можно получить прямой доступ из хранилища как store.dispatch(), но скорее всего вы будете получать доступ к ней с помощью вспомогательного средства, например, react-redux's connect(). Вы можете использовать bindActionCreators() для автоматической привязки многих создателей действий к функции dispatch().

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

Исходный код

actions.js

/*
 * action types
 */

export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'

/*
 * other constants
 */

export const VisibilityFilters = {
  SHOW_ALL: 'SHOW_ALL',
  SHOW_COMPLETED: 'SHOW_COMPLETED',
  SHOW_ACTIVE: 'SHOW_ACTIVE'
}

/*
 * action creators
 */

export function addTodo(text) {
  return { type: ADD_TODO, text }
}

export function toggleTodo(index) {
  return { type: TOGGLE_TODO, index }
}

export function setVisibilityFilter(filter) {
  return { type: SET_VISIBILITY_FILTER, filter }
}

Следующие шаги

Теперь давайте определим некоторые редьюсеры, чтобы указать, как состояние обновляется при отправке этих действий!