Основные концепции

Сам Redux очень прост.

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

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

Этот объект похож на «модель», за исключением отсутствия методов установки. Это делается для того, чтобы разные части кода не могли произвольно изменять состояние, что может приводить к трудно воспроизводимым ошибкам.

Чтобы изменить что-то в состоянии, необходимо выполнить отправку действия. Действие — это обычный объект JavaScript (обратите внимание, что мы не вводим никакой магии?), который описывает произошедшее событие. Вот несколько примеров действий:

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

Требование, чтобы каждое изменение описывалось как действие, позволяет нам ясно понимать, что происходит в приложении. Если что-то изменилось, мы знаем, почему. Действия — это как следы, которые указывают на произошедшие события. Наконец, для связи состояния и действий мы пишем функцию, называемую редьюсером. Опять же, в ней нет ничего волшебного — это просто функция, которая принимает состояние и действие в качестве аргументов и возвращает следующее состояние приложения. Было бы сложно написать такую функцию для большого приложения, поэтому мы пишем более мелкие функции, управляющие частями состояния:

function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter
  } else {
    return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([{ text: action.text, completed: false }])
    case 'TOGGLE_TODO':
      return state.map(
        (todo, index) =>
          action.index === index
            ? { text: todo.text, completed: !todo.completed }
            : todo
      )
    default:
      return state
  }
}

И мы пишем другой редьюсер, который управляет полным состоянием нашего приложения, вызывая эти две функции для соответствующих ключей состояния:

function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  }
}

Это, по существу, вся идея Redux. Обратите внимание, что мы не использовали никаких API Redux. В нём есть несколько утилит для облегчения этого шаблона, но основная идея состоит в том, что вы описываете, как ваше состояние обновляется со временем в ответ на объекты действий, и 90% написанного вами кода — это просто обычный JavaScript без использования самого Redux, его API или какой-либо магии.