Redux — это просто поток с одним магазином

Redux — это библиотека Javascript, которая помогает разработчикам управлять состоянием приложения, например, это может быть зарегистрированный пользователь или подписчики данного пользователя в приложении социальной сети.

Я работаю с Redux пару месяцев, и это здорово! Что-то просто пришло мне в голову, когда я начал его использовать. Затем я вспомнил, что давным-давно читал о шаблоне проектирования Flux. Не волнуйтесь, если вы ничего не знаете о редуксах или потоках, я постараюсь разъяснить. Я только что понял кое-что об этих двух вещах. Я сказал себе: «Значит, это всего лишь реализация потока, но у вас только один магазин».

Когда я так говорил некоторым людям, привыкшим работать с Redux, их реакция была примерно такой: «Что? Что такое поток?». Это было немного странно, потому что для меня было ясно, что сокращение связано с потоком. Но потом я кое-что понял. Очень легко говорить о Redux, даже не думая о потоке. Большинство людей описывают Redux просто как библиотеку управления состоянием приложения для внешнего интерфейса, и это правда. Но я думаю, что это не самый полный ответ. Если вы прыгнете в него и просто начнете его использовать, вы упустите общую картину. Не волнуйтесь, я не осуждаю! Если вы только что присоединились к проекту, в котором используется эта библиотека, вам нужно узнать, как она работает, и что делать, верно? Может пройти некоторое время, прежде чем все это обретет смысл.

Если вы не знаете, что такое редукс, вы попали по адресу. Я постараюсь объяснить вам это простыми словами. Даже если вы знакомы с Redux, уверены ли вы, что действительно знаете, что это такое и откуда берутся все его концепции? Я думаю, что определение редукса подразумевает, что вы сначала объясните, что такое поток. Как только вы это поймете, избыточность станет естественной, и вы поймете, почему я определяю ее как «поток только с одним хранилищем».

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

Если вы уже потеряли, не волнуйтесь. Я разберу это, чтобы вы поняли, что такое Flux и Redux. Затем вы можете перейти к Руководству по началу работы с Redux и начать создавать потрясающие проекты!

Позвольте мне распаковать Redux для вас.

Флюс

Когда я открываю коробку Redux, первое, что я нахожу, это Flux. Это шаблон проектирования, созданный Facebook для управления состоянием приложения. Я не собираюсь сосредотачиваться на какой-то конкретной реализации. Я думаю, как только вы поймете паттерн, вы сможете просто найти любую реализацию и начать ее использовать.

У него есть действия, один диспетчер, один или несколько магазинов и, конечно же, представления. Давайте разберем это:

  • Действие. Это просто объект, которому нужен как минимум ключ type, определяющий тип действия. Этот тип будет использоваться позже для принятия решений об обновлениях состояния.
  • Диспетчер: в его обязанности входит отправка действий во все магазины.
  • Магазин: магазин получает действия и соответствующим образом обновляет состояние приложения.
  • Вид: это просто компонент пользовательского интерфейса, с которым взаимодействует пользователь.

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

Это работает следующим образом:

  • Пользователь взаимодействует с приложением представления, и эти взаимодействия создают действия.
  • Действия отправляются во все магазины через Диспетчер.
  • Каждое хранилище, запрограммированное на прослушивание заданного действия, может обновлять свое состояние.
  • Новое состояние будет доступно представлениям для использования в случае необходимости.

Каждое хранилище отвечает за обработку состояния и логики для данного домена. Например, если вы создаете социальную сеть, у вас может быть одно хранилище для управления пользователями, а другое — для ленты. Некоторые магазины будут прослушивать отправленные действия, а некоторые просто проигнорируют их. Разработчик должен решить, какое хранилище заботится о каких действиях. В этом примере действием может быть «канал пользователя получен» или «пользователь попросил подписаться на другого пользователя».

Это очень упрощенный взгляд на Flux. Рекомендую погрузиться в официальную документацию.

Теперь, когда я показал вам, что было внутри коробки Redux, шаблон Flux, давайте перейдем к самой коробке… Redux!

Редукс

Посмотрев на Flux, измените его так, чтобы у него было только одно хранилище, и добавьте концепцию Reducer. Вот и все, теперь у вас есть Redux.

На следующей диаграмме показано, как различные компоненты Redux взаимодействуют друг с другом:

Это работает следующим образом:

  • Пользователь взаимодействует с представлениями, которые могут создавать некоторые действия.
  • Эти действия отправляются (через Диспетчер) редюсеру.
  • Редуктор получает текущее состояние и действие и возвращает новое состояние.
  • Теперь представлениям нужно просто получить новое состояние из store.

Очень похоже на Flux, верно? Но у вас только один магазин. Единственный способ изменить состояние — отправить действие. Редуктор получит его и вернет новое состояние. Одна действительно важная вещь в отношении редуктора заключается в том, что это должна быть чистая функция, то есть функция, которая дает тот же результат для тех же аргументов и не имеет никаких побочных эффектов. Это означает, что редюсер должен создать новый объект состояния вместо изменения существующего. Это единственный способ для Redux обнаружить, что состояние было обновлено.

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

{
  “followers": [],
  "following": [],
  "feed": []
}

А редуктор…

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

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

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

Как и во Flux, у вас все еще есть действия и магазин, но в более упрощенном виде. Вам просто нужно отправлять действия и обрабатывать изменения состояния в редюсере.

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

Заключение

Очень легко сразу перейти к редуксу, не понимая, что вдохновило все эти концепции, такие как действия и магазин. Я думаю, что важно получить общую картину и узнать о потоках, даже если это просто упрощенный обзор, такой как тот, который вы только что прочитали. Flux может быть немного сложно понять на первый взгляд. Я думаю, что Redux дает вам этот шаблон гораздо проще и легче. У вас есть только одно хранилище, а обновления состояния обрабатываются редьюсерами, которые должны быть чистыми функциями.

В следующий раз, когда кто-то спросит вас, что такое избыточность, вы можете просто распаковать. Сначала вы показываете окно Redux. Затем вы открываете его и достаете Flux из коробки. Теперь вы объясняете Flux и, в конце концов, возвращаетесь к блоку Redux, и все становится понятным. Вот почему я определяю Redux таким простым предложением: «Redux — это просто поток только с одним хранилищем».

Надеюсь, вам понравилось и вы чему-то научились. Удачного кодирования! :)

Дайте мне знать, что вы думаете, и подписывайтесь на меня, чтобы получать больше интересного контента о вещах разработчиков :)

📝 Читайте эту историю позже в Журнале.

👩‍💻 Просыпайтесь каждое воскресное утро и слушайте самые примечательные новости недели в области технологий, ожидающие в вашем почтовом ящике. Читать информационный бюллетень Noteworthy in Tech.