Вокруг сотни и сотни государственных библиотек управления. Каждый день на echojs можно увидеть новый.

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

Однако есть один, который заслуживает того, чтобы о нем знали больше. Это называется сверхразум.

Что делает сверхразум таким уникальным?

Что касается управления состоянием, редукс является королем. Но redux — это голая кость, и вы быстро добавите неизменяемость, обработку побочных эффектов, библиотеку селекторов, создателей действий и так далее.

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

С другой стороны, overmind стремится предоставить все, что вам нужно, с помощью простого API и помогает вам в конечном итоге создавать гораздо менее подробный код.

Что делает надразум таким особенным, так это то, что он соответствует тому, как вы думаете, когда думаете о потоках состояний, например. :

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

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

Давайте даже не будем говорить о причудливых API-интерфейсах createAsyncThunk и extraReducers Redux-toolkit.

Overmind объединяет понятия состояния, действий, редукторов и побочных эффектов в одном месте, сохраняя при этом все четко изолированным.

Как ?

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

суть

Идея проста, вы просто определяете действия, и эти действия делают то, что должны: делать что-то.

Редуктора нет, только действия позволяют изменять состояние, запускать другие действия и вызывать побочный эффект:

Давайте подробно изучим API.

Конфигурация

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

Действия

Действия – это несколько понятий, объединенных в одно. Они представляют собой смесь классических редукс-экшенов, thunk-экшенов, редукторов и промежуточного программного обеспечения.

Действие может:

  • Мутировать состояние
  • Запустить другое действие
  • Назовите побочный эффект
  • Быть асинхронным

Давайте посмотрим пример действия:

Здесь мы изменяем состояние, вызываем побочный эффект и снова изменяем состояние. Простой.

Последствия

Чтобы обрабатывать побочные эффекты, вам нужно обернуть их в нормализованный API. Затем они доступны через аргумент «эффекты».

Давайте посмотрим, как мы можем реализовать побочный эффект маршрутизатора:

Существует специальный метод под названием «onInitializeOvermind», который позволяет вам настраивать вещи. Это идеальное место для инициализации побочных эффектов:

Затем для каждого маршрута будет вызываться соответствующее действие:

О получении данных

Одна из вещей, которую вы захотите реализовать в побочных эффектах, — это выборка данных. Возможно, вы обычно используете apollo-client или relay.

Хотя эти библиотеки довольно продвинуты в своей области, они вносят большую сложность в ваше приложение, и вы часто будете сталкиваться с тем моментом, когда будете спрашивать себя, как интегрировать их с вашим состоянием.

С надразумом вы, вероятно, найдете освежающим возможность самостоятельно обрабатывать свои запросы в качестве побочного эффекта, вручную кэшируя вещи вместо того, чтобы бороться с этим кешем аполлона, который мы все ненавидим (не так ли?).

Существует официальный аддон GraphQL, который охватывает основы, но если вам нужен опрос или какое-то расширенное кэширование, вы, вероятно, захотите сделать свой собственный. Это может звучать пугающе, но на самом деле это может быть намного проще, чем пытаться заставить apollo и redux мирно жить вместе.

Состояние

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

Как видите, вы можете определить производные значения состояния из исходного состояния. Вы также можете использовать это как геттеры и добавить аргумент.

Компоненты

Соединить компоненты очень просто. Поскольку надразум использует прокси, вы просто получаете доступ к состоянию внутри компонента с помощью хука, и он будет обновляться только в том случае, если эта часть состояния изменится:

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

Инструменты разработчика

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

Есть намного больше!

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

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