(*) Нет redux, redux-react, response-router, react-router-dom, react-router-redux, redux-sagas или альтернативы

React - очень популярная библиотека, которая воплощает мечту UI = f (state) в реальность. Но React - это просто библиотека пользовательского интерфейса, она определяет себя как «библиотека JavaScript для создания пользовательских интерфейсов». Но это оставляет желать лучшего, поскольку большинству реальных приложений требуется маршрутизация, управление состоянием, вызовы сервера и другие инструменты управления побочными эффектами. Многие библиотеки предлагают целый набор инструментов, чтобы сделать все это в рамках самоуверенного фреймворка, но React этого не делает. Он просто заботится о вашем пользовательском интерфейсе, а вы можете решать все остальное так, как считаете нужным. Это привело к обычным подозрениям: redux, response-router и redux-sagas или некоторая комбинация подобных инструментов.

С тех пор, как React анонсировал новый контекстный API, люди начали говорить о том, что Redux устаревает, и теперь с API хуков каждый создает свой собственный вариант Redux, и я тоже!

Чтобы было ясно, комбо Redux, React-Router, Redux-sagas очень мощное и доказанное в реальных огромных приложениях, если вы серьезно относитесь к своему приложению, методы DIY не рекомендуются. Кроме того, Redux - это не просто менеджер состояний, вокруг него есть множество инструментов, которые делают его ценным.

Это всего лишь эксперимент, я не занимался ни чисткой, ни краями, он простой, простой и не более того.

Redux

Разобравшись с этим, давайте свергнем Redux:

Вот так и состоит ядро ​​редуктора состояния:

  • Определить начальное состояние
  • Предоставьте возможность подписаться / отказаться от подписки на изменения состояния (Как видите, я не отписываюсь, я человек слова)
  • Обеспечить способ отправки действий для расчета нового состояния и уведомления подписчиков.

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

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

Это предоставляет объект, который объединяет создателя действия и саму константу, упрощая использование и позволяя динамическое создание в случае создания знаменитых 4 или 5 констант сетевых запросов.

Теперь, когда у нас есть менеджер состояний, нам нужно связать его с React:

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

Теперь собираем все вместе:

  • Состояние приложения напрямую связано с состоянием магазина
  • При изменении состояния приложения изменяется и запускается пересчет контекста и подкомпонентов.
  • connect принимает селектор для извлечения только необходимых значений
  • React.memo необходим для обеспечения повторного рендеринга только измененных компонентов.

Саги

Redux-sagas - мощная библиотека, она предоставляет множество функций для обработки нескольких асинхронных задач во многом аналогично потокам в Rx. Но во многих случаях он используется для обработки простых асинхронных задач, таких как сетевые запросы. В этих случаях Promises могут иметь большое значение, и с некоторым синтаксическим сахаром async / await мы можем легко добиться аналогичного поведения:

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

Маршрутизатор

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

  • Маршрутизатор просто соединяет историю и хранилище
  • Этот маршрутизатор в том смысле, что он уже привязан к хранилищу, в отличие от React-router, который имеет свой собственный контекст, затем нуждается в другом уровне для привязки его к хранилищу.
  • UnconnectedRoute - это тот, который обрабатывает все, он вычисляет регулярное выражение на основе заданного пути, следит за изменениями местоположения, чтобы проверить регулярное выражение и подтолкнуть новое состояние местоположения, если оно найдено.
  • UnconnectedRoute должен быть подключен к магазину, чтобы иметь состояние местоположения

Проверьте полный код в репозитории.

Заключение

Когда у меня была эта работа, я был впечатлен мощью React, думал, что использую его в течение длительного времени, я никогда не делал такие части. Но, в конце концов, в React, если вы можете превратить что-либо в распространяющиеся реквизиты, это сработает автоматически.

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