React 16.3.0 был выпущен и API Context больше не является экспериментальной функцией. Дэн Абрамов (создатель Redux) написал хороший комментарий здесь об этом, но прошло 2 года, когда Context все еще был экспериментальной функцией.

Мой вопрос заключается в следующем: по вашему мнению/опыту, когда мне следует использовать React Context вместо React Redux и наоборот?

Ответы (5)

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

Как написал Марк Эриксон в своем блоге:

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

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

Redux намного мощнее и предоставляет большое количество возможностей, которые Context API не предоставляет, также как @danAbramov упомянул

.

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

Именно Redux должен обновить свою реализацию, чтобы она соответствовала последнему Context API.

Новейший Context API может быть использован для приложений, где вы просто будете использовать Redux для передачи данных между компонентами, однако приложения, использующие централизованные данные и обрабатывающие API-запросы в Action creators с помощью redux-thunk или redux-saga, по-прежнему нуждаются в Redux. Кроме того, в Redux есть и другие библиотеки, связанные с ним, например redux-persist, которая позволяет сохранять/сохранять данные в localStorage и восстанавливать их при обновлении, чего до сих пор не поддерживает Context API.

.

Как отметил @dan_abramov в своем блоге Вам может не понадобиться Redux, Redux имеет такие полезные применения, как

  • Переносите состояние в локальное хранилище и затем загружайтесь с него, из коробки.
  • Заполнить состояние на сервере, отправить его клиенту в HTML и загрузиться с него, "из коробки".
  • Сериализация действий пользователя и прикрепление их вместе со снимком состояния к автоматическим отчетам об ошибках, чтобы разработчики продукта
    могут воспроизвести их для воспроизведения ошибок.
  • Передавать объекты действий по сети для реализации совместной работы без кардинальных изменений в написании кода.
  • Ведение истории отмены или реализация оптимистичных мутаций без кардинальных изменений в написании кода.
  • Передача объектов действий по сети для реализации совместной среды без кардинальных изменений в написании кода.
  • Путешествовать между историями состояний в процессе разработки и повторно оценивать > текущее состояние из истории действий, когда код меняется, аля TDD.
  • Предоставление возможностей полной проверки и контроля инструментария разработки, чтобы разработчики продуктов могли создавать собственные инструменты для своих приложений.
  • Предоставление альтернативных пользовательских интерфейсов при повторном использовании большей части бизнес-логики.

С таким количеством приложений еще слишком рано говорить о том, что Redux будет заменен новым Context API.

Для меня единственными причинами для использования Redux являются:

  • Вам нужен глобальный объект состояния (по разным причинам, например, отлаживаемость, персистентность...)
  • Ваше приложение является или будет являться большим и должно масштабироваться для многих разработчиков: в таком случае вам, вероятно, нужен уровень косвенности (т.е. система событий): вы запускаете события (в прошлом), а затем незнакомые вам люди в вашей организации могут их прослушать
  • .

Вероятно, вам не нужен уровень непрямолинейности для всего приложения, поэтому вполне можно смешивать стили и использовать локальное состояние/контекст и Redux одновременно.

  • Если вам необходимо использовать промежуточное ПО для различных целей. Например, протоколирование действий, отчет об ошибках, отправка других запросов в зависимости от ответа сервера и т.д.
  • . от ответа сервера и т.д.
  • Когда данные, поступающие из нескольких конечных точек, влияют на один компонент/вид.
  • .
  • Когда вы хотите иметь больший контроль над действиями в ваших приложениях. Redux позволяет отслеживать действия и изменение данных, что значительно упрощает отладку. значительно упрощает отладку.
  • Если вы не хотите, чтобы ответ сервера напрямую изменял состояние вашего приложения. Redux добавляет слой, где вы можете решить, как, когда и следует ли применять эти данные. и следует ли применять эти данные. Шаблон наблюдателя. Вместо того чтобы создания множества издателей и подписчиков во всем приложении, вы просто подключаете компоненты к хранилищу Redux.

From: Когда использовать Redux?

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

С другой стороны, если вы используете Redux для всего остального (наличие предсказуемого контейнера состояния, обработка логики приложения вне компонентов, централизация состояния приложения, использование Redux DevTools для отслеживания того, когда, где, почему и как изменилось состояние вашего приложения, или использование плагинов, таких как Redux Form, Redux Saga, Redux Undo, Redux Persist, Redux Logger, и т.д...), то у вас нет абсолютно никаких причин отказываться от Redux. API Context не предоставляет ничего из этого.

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

Некоторые рекомендации:

Я предпочитаю использовать redux с redux-thunk для выполнения вызовов API (также использую Axios) и отправки ответа редукторам. Он чист и прост для понимания.

Контекстный API очень специфичен для react-redux в части того, как компоненты React подключаются к магазину. Для этого react-redux хорош. Но если вы хотите, поскольку Context официально поддерживается, вы можете использовать Context API вместо react-redux.

Так, вопрос должен звучать так: Context API vs react-redux, а не Context API vs redux. Кроме того, вопрос немного спорный. Поскольку я знаком с react-redux и использую его во всех проектах, я буду продолжать использовать его. (У меня нет стимула менять его).

Но если вы изучаете redux только сегодня и нигде его не использовали, стоит попробовать Context API и заменить react-redux на ваш собственный код Context API. Возможно, так будет намного чище.

С моей точки зрения, это вопрос привычки. Нет четкой причины выбирать один из них вместо другого, потому что они эквивалентны. А внутри react-redux в любом случае использует Context.

2022 WebDevInsider