Две базовые идеи в Redux

Прежде, чем начать изучение библиотеки Redux, давайте познакомимся с двумя ее базовыми идеями. Первую идею, касающуюся управления состоянием, мы рассмотрим на примере обычного счетчика на стейте в React:

jsxfunction Counter() {
  // State
  const [count, setCount] = useState(0)

  // Action:
  function clickHandler() {
    setCount(count + 1)
  }

  // View:
  return (
    <div>
      <span>{count}</span>
      <button onClick={clickHandler}>+</button>
    </div>
  )
}

В этом коде мы видим стейт для переменной count - это источник истины для счетчика. Затем мы видим действие (action) - событие, которое по клику пользователя вызывает обновление стейта. И, наконец, представление (view), с помощью которого мы отображаем пользовательский интерфейс.

Таким образом схема довольно проста: кнопка нажимается - стейт count (State) по нажатию (Action) изменяется, следовательно изменяется представление (View) - в нашем случае это число на экране.

Однако, все будет сложнее, если у нас множество компонентов, которые должны использовать один и тот же стейт. Можно, конечно, к примеру поднять состояние до родительских компонентов, но такое решение не всегда может избавить от проблемы. Redux в этом случае предлагает нам создать одно место в приложении, которое бы содержало глобальное состояние и определенные шаблоны поведения при обновлении этого состояния. Именно в этом и заключается первая базовая идея (!).

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