Замена Redux новым контекстным API React

1656671288 zamena redux novym kontekstnym api react

Дидье ФРАНЦ

1*G-vhFzhkTXo1cHSLY0y-rg

Новый контекстный API, поставляемый с React 16.3, достаточно хорош. Построенный в стиль визуализации реквизита тенденции в последние месяцы. Давайте исследуем это:

Это довольно хорошо, правда? Давайте пойдем дальше с Flux-подобной реализацией.

Что такое Flux?

Это выступление великолепного Цзин Чэна изменило наше представление о наших сегодняшних программах. Если вы хотите знать, что такое Flux как концепция, посмотрите сюда.

1*krW1XEfCCHg1eQFrPJMrqA
Базовое представление Flux

Одна библиотека демократизировала эту концепцию: Redux Дэна Абрамова и его легендарная демонстрация путешествий по времени на React Europe 2015.

Реализация

С createContext() Пример API выше, мы уже имеем однонаправленный Магазин → Просмотр на месте.

1*Do6ERUrJHSj9Vmw0ngwIHg

То, что нам нужно действия и диспетчеры для динамического обновления магазина. Что, если наш динамический магазин был просто состоянием корневого компонента React?

Мы только что передали состояние и действия как значение поставщика. И теперь мы можем получить это вместе <Потребитель />.

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

реагировать-водопад

1*O6SqDvFqwhpqj9TUVzxFVw
Доступный пример репозитория здесь

Просто импортируйте initStore от реагировать-водопадустановите свой исходное состояние, и выполнить некоторые действия: (состояние, …арг) → станЧунк и все готово.

Создано сохранять дает вам такие интересные вещи, как:

  • Улучшенный Провайдер и Потребитель представлены выше
  • действия (к ним можно получить доступ с Потребительтоже)
  • getState() чтобы получить текущее состояние
  • подключить()() сопоставлять состояние и действия с атрибутами компонентов
  • подписаться() реагировать на изменения состояния

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

Если хочешь время в пути, это возможно? чтобы просто запустить этот пример. Реализация здесь.

Сравнение с Redux

1*22lo3_HFH1lIWVSmgJdd5g

ℹ️ Инструменты Redux Devtools были интегрированы по умолчанию в версии 4.0.0, вам ничего не нужно делать, они просто работают.

плюсы

  • Проще в реализации
  • Вес и производительность
  • Возврат более чистого действия с фрагментом состояния (как у setState)

минусы

  • Он работает только с React ^16.3

Хочешь попробовать?

I̶ ̶h̶a̶v̶e̶ ̶n̶o̶t̶ ̶f̶o̶u̶n̶d̶ ̶a̶ ̶s̶e̶x̶y̶ ̶n̶a̶m̶e̶ ̶f̶o̶r̶ ̶i̶t̶ ̶y̶e̶t̶,̶ ̶b̶u̶t̶ ̶i̶f̶ ̶y̶o̶u̶ ̶h̶a̶v̶e̶ ̶a̶n̶ ̶i̶d̶e̶a̶ ̶f̶o̶r̶ ̶i̶t̶ ̶p̶o̶s̶t̶ ̶y̶o̶u̶r̶ ̶s̶u̶g̶g̶e̶s̶t̶i̶o̶n̶s̶ ̶h̶e̶r̶e̶ ̶o̶r̶ ̶s̶e̶n̶d̶ ̶m̶e̶ ̶a̶ ̶t̶w̶e̶e̶t̶.̶ ̶F̶o̶r̶ ̶n̶o̶w̶ ̶i̶t̶’̶s̶ ̶o̶n̶l̶y̶ ̶a̶v̶a̶i̶l̶a̶b̶l̶e̶ ̶v̶i̶a̶ ̶G̶i̶t̶h̶u̶b̶.̶

пряжа добавить реагировать-водопад

?

больше

Если вас интересует новое Реагировать ключевые функции не пропустите «Когда React стал (еще больше) асинхронным».

Если вы не хотите пропустить ни одну из моих статей, следите за мной в Twitter @DidierFranc

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *