Неофициальный Бета-перевод

Эта страница переведена PageTurner AI (бета). Не одобрена официально проектом. Нашли ошибку? Сообщить о проблеме →

Три принципа

Redux можно описать тремя фундаментальными принципами:

Единый источник истины

Глобальное состояние вашего приложения хранится в виде дерева объектов в едином хранилище (store).

Это упрощает создание универсальных приложений, так как состояние сервера может быть сериализовано и гидратировано на клиенте без дополнительных усилий. Единое дерево состояния также облегчает отладку и анализ приложения, позволяя сохранять состояние в процессе разработки для ускорения цикла. Некоторые функции, традиционно сложные в реализации (например, Undo/Redo), становятся тривиальными, когда всё состояние хранится в едином дереве.

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

Состояние доступно только для чтения

Единственный способ изменить состояние — отправить действие (action), объект, описывающий произошедшее событие.

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

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

Изменения производятся чистыми функциями

Чтобы определить, как действия преобразуют дерево состояния, вы пишете чистые редьюсеры (reducers).

Редьюсеры — это чистые функции, принимающие предыдущее состояние и действие, и возвращающие новое состояние. Важно возвращать новые объекты состояния вместо изменения существующих. Начните с одного редьюсера, а по мере роста приложения разделите его на специализированные редьюсеры для отдельных частей дерева состояния. Поскольку редьюсеры — обычные функции, вы можете управлять порядком их вызова, передавать дополнительные данные или создавать переиспользуемые редьюсеры для типовых задач (например, пагинации).

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
const reducer = combineReducers({ visibilityFilter, todos })
const store = createStore(reducer)

Вот и всё! Теперь вы понимаете основную суть Redux.