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

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

Поскольку требования к одностраничным приложениям JavaScript становятся все более сложными, наш код должен управлять большим количеством состояний, чем когда-либо прежде. «Состояние» может включать в себя множество вещей, таких как (спасибо Дэну Абрамову!)

Ответ сервера

Активные маршруты, выбранные вкладки

Кешированные данные

С появлением ReactJS и возрождением парадигм функционального программирования Redux стал чрезвычайно популярным выбором для управления состоянием приложений.

Основная причина его роста популярности - его сила в сочетании с React. Используя обе эти библиотеки в приложении, React позаботится о рендеринге данных / разметки в DOM, а Redux будет действовать как «контейнер предсказуемого состояния». Не пугайтесь этого термина!

«Термин предсказуемого состояния» - это просто причудливый способ сказать, что Redux поможет нам управлять состоянием наших приложений, действуя предсказуемым образом, когда в нашем приложении запускаются определенные действия. Прежде чем перейти к коду, давайте обсудим 3 принципа Redux.

3 принципа Redux

  1. Все состояние приложения будет представлено одним объектом JavaScript. Это также называется деревом состояний Javascript.

2. Дерево состояний доступно только для чтения. Это означает, что мы никогда не будем напрямую манипулировать значениями нашего дерева состояний. Состояние будет обновляться / изменяться отправленными действиями (мы скоро обсудим это).

3. Функция редуктора. В приложении redux есть одна конкретная функция, которая принимает предыдущее состояние и отправляемое действие и возвращает следующее состояние приложения.

Давайте посмотрим на этот поток визуально:

Хорошие принципы - это хорошо, но как это на самом деле работает?

Redux предоставляет нам метод createStore. Магазин связывает 3 принципа redux следующими методами:

const store = createStore(<YOUR REDUCER FUNCTION HERE>)
/*The reducer function should handle all possible actions and initialize the app state*/
store.getState() /* Returns current application state */
store.dispatch(<JS object>)
/* Dispatch action to change app state. An action is a plain JS object that must have a 'type' key */
store.subscribe(<CALLBACK FUNCTION>) 
/* Will be called after every store.dispatch(), so that we can update our app UI */

Теперь, когда мы знакомы с основными методами Redux, мы можем приступить к созданию нашего приложения.

Давайте посмотрим на базовую разметку, настроенную с некоторыми прослушивателями событий, когда мы нажимаем кнопки:

Архитектура приложения

Отлично, разметка есть, теперь давайте уменьшим (придумал ее первым!) Наше приложение.

Первый вопрос, который приходит в голову… В каком состоянии будет наше приложение? Что ж, это просто счетчик, поэтому единственное, что мы хотим отслеживать, - это текущее значение счетчика.

Как можно изменить / обновить состояние нашего приложения? Что ж, если пользователь нажимает кнопку «+», мы должны увеличивать счетчик, удерживаемый в состоянии приложения, и если он нажимает кнопку «-», мы должны соответственно уменьшать.

Наша функция редуктора отвечает за инициализацию состояния и обновление на основе отправленных действий. Давай запишем.

function counter(state = 0, action) {
 switch (action.type) {
   case ‘INCREMENT’:
     return state + 1
   case ‘DECREMENT’:
     return state — 1
    default:
     return state
  }
}

Как следует обновлять наш пользовательский интерфейс при отправке действия? Единственное, что обновляется, - это текстовое значение div с идентификатором «value». Итак, наша функция обратного вызова для метода store.subscribe должна выглядеть так:

function render() {
 valueEl.innerHTML = store.getState().toString()
}

Все вместе это должно выглядеть так:

В заключение, Redux - отличная библиотека, которая помогает нам организовать состояние и поток, отправляя действия, которые отражают изменения в нашем приложении. Его можно использовать как отдельную библиотеку, как в нашем примере выше, или вместе с библиотеками и фреймворками, такими как React, Angular и другими.

Если вы нашли это ценным, подпишитесь на меня / напишите на Medium, Github, Linkedin или на [email protected] ❤