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

Redux не виноват. Как и любая другая библиотека, она предлагает некоторые компромиссы, такие как касание трех файлов для выполнения простых задач, описание состояния и действий как простых объектов и массивов и обработка логики через чистые функции. Эти ограничения упрощают отладку, улучшают тестируемость, гарантируют предсказуемость пользовательского интерфейса с учетом состояния и многое другое.

Но если писать так много для того, чтобы делать меньше, это немного раздражает и замедляет общее развитие.

Действительно ли нам нужна библиотека государственного управления?

Разве мы не можем просто определить простые классы ES6 как модели и хранить их экземпляры в коллекции массивов без использования библиотеки? Да мы можем! Но проблема не в хранении или извлечении данных.

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

  • Синхронизация пользовательского интерфейса с изменением данных
  • Пересчет вычисленных переменных
  • Переход к другому маршруту

Если мы изменим данные с помощью оператора присваивания (например, user.name = John Doe), у нас не будет механизма для обнаружения изменения (Object.observe () устарел).

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

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

Как это решают другие фреймворки?

  • Грязная проверка: Angular 1.x использует механизм грязной проверки, при котором новое и старое дерево данных глубоко сравниваются в последовательных циклах. Поначалу это выглядит заманчиво, но при масштабировании убивает производительность.
  • Реактивное программирование: Angular 2 и Meteor используют концепции реактивного программирования, которые упрощают понимание и масштабирование распространения данных и обнаружения изменений.
  • Шаблон наблюдателя. Подобно концепциям реактивного программирования, шаблон наблюдателя запускает события при изменении данных. Knockout.js и MobX используют шаблон наблюдателя.
  • Setter и Getter: старые добрые методы setter и getter решили проблему обнаружения изменений в течение многих лет, которые использовались Ember и Backbone.

Какие есть альтернативы Redux?

this.setState ()

В React есть собственный метод обнаружения изменений на уровне компонентов. Если вы новичок в React, просто придерживайтесь подхода this.setState (). Он хорошо работает для небольших приложений. Например: Простое приложение Todo

Паттерны Reactive и Observer с React

  • MobX (он же mobservable) : он занимает очень мало места. Если вам удобно использовать объектно-ориентированный шаблон, этот шаблон для вас. Используя декораторы ES6 / 7, вы вряд ли почувствуете, что используете какую-либо библиотеку.
  • RxJS: Реактивное расширение JavaScript, как они его называют. RxJS сам по себе зверь. Проще говоря, RxJS = Observables + Operators + Schedulers. Хотя он известен как отдельная библиотека, у него есть несколько изящных привязок для React.

Другие реализации Flux

Мой личный выбор: MobX

[Обновление от 24 октября 2017 г.] Я начал использовать mobx-state-tree, который является контейнером состояний и использует MobX.

Почему MobX?

  • Лучшая часть MobX заключается в том, что он избавляет от необходимости добавлять слушателей для изменений данных, он прозрачно применяет концепции реактивного программирования (TFRP) к вашим моделям данных и обновляет часть пользовательского интерфейса всякий раз, когда это необходимо. требуется.
  • Объектно-ориентированные концепции для победы: вы можете использовать старые добрые объектно-ориентированные концепции и применить их к моделям данных в своем приложении.
  • Легко документировать и общаться. Как технический руководитель, MobX упрощает мою работу по документированию всех классов и хранилищ со свойствами и методами, которые необходимо создать.
  • Быстрая разработка. Вы можете сосредоточиться на бизнес-логике приложения и выполнять задачи гораздо быстрее, чем в других библиотеках.
  • Добавлен крючок жизненного цикла всякий раз, когда есть реакция: mobx-react добавляет крючок жизненного цикла под названием componentWillReact () для реактивных обновлений. Этот хук можно использовать в маршрутизаторах и навигаторах.

Компромиссы?

Если вы выбираете одну библиотеку над другой, вы что-то получаете и что-то теряете. Вот некоторые из компромиссов, которые предлагает MobX:

  • Поскольку мы используем классы и производные объекты вместо простых объектов JavaScript, данные нельзя сериализовать сразу. Вам нужно написать свои собственные методы toJS () и fromJS () для каждого класса.
  • Данные необходимо сериализовать каждый раз, когда данные выходят из среды выполнения, например, при выполнении вызовов API, хранении их в LocalStorage, заполнении хранилищ в серверной части из других источников данных и т. Д.
  • В отличие от Redux, такие функции, как отмена / повтор и перемещение изменений данных во времени, необходимо создавать вручную.

Суть

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

Я что-нибудь пропустил? Не стесняйтесь добавлять ответ на статью для любых исправлений, мнений и обсуждений.

Если вам понравилась статья, подумайте о том, чтобы порекомендовать ее. Я Sanket, и мы создаем NativeBase.io на GeekyAnts.

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

Чтобы узнать больше, прочтите нашу страницу о нас, поставьте лайк / напишите нам в Facebook или просто tweet / DM @HackerNoon.

Если вам понравился этот рассказ, мы рекомендуем прочитать наши Последние технические истории и Современные технические истории. До следующего раза не воспринимайте реалии мира как должное!