Три принципа

Redux можно описать тремя основными принципами:

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

Состояние всего приложения хранится в дереве объектов в единственном хранилище.

Это упрощает создание универсальных приложений, поскольку состояние с сервера можно сериализовать и загрузить на клиент без дополнительных усилий. Единое дерево состояния также облегчает отладку или инспектирование приложения; оно также позволяет сохранять состояние приложения во время разработки для ускорения цикла разработки. Некоторые функции, которые традиционно сложно реализовать — например, «Отменить/Повторить» — могут стать тривиальными, если всё состояние хранится в одном дереве.

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
    }
  ]
}
*/

Состояние неизменяемо

Изменить состояние можно только отправив действие, объект, описывающий произошедшее событие.

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

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

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

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

Для указания того, как действия преобразуют дерево состояния, вы используете чистые редукторы.

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

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.