Читать на Redux (VS контекст)

Вопрос, с которым я столкнулся, когда изучал Redux: в чем разница между API контекста React и Redux? Итак, я провел несколько исследований …

Что мы пойдем:

• Что такое Redux?
• Что такое контекст?
• Как данные текут при использовании контекста и Redux?
• Плюсы и минусы Redux и контекста

Что такое контекст?

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

Контекст реагирования состоит из:

React.createContext

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

Контекст Провайдер

Каждый объект контекста поставляется с провайдером React Component, который оборачивается вокруг компонентов, которые вы хотите подписаться на объект контекста и изменения, которые происходят с контекстом. Каждый компонент, завернутый в компонент поставщика, является потребителем контекста. Компонент поставщика принимает ценную опору, которая передается потребляющим компонентам, главное, что нужно помнить, заключается в том, что все потребители поставщика будут повторно рендеринг всякий раз, когда произойдет изменение в Prop Provider Prop.

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

Что такое Redux?

Redux – это библиотека управления государством, используемая для хранения и управления состоянием приложения React в централизованном месте. Redux абстрагирует все штаты из приложения в один глобализированный объект состояния, чтобы любой компонент и любая часть приложения могли получить доступ к различным свойствам глобального состояния. Redux отделен от React, и есть инструменты, которые реагируют, чтобы помочь интегрировать Redux в приложения React, такие как React Toolkit.

Redux состоит из:

Действия

Действия описывают то, что вы хотите сделать со своими штатами.

Редукторы

Редакторы описывают, как ваши действия превращаются из состояния в состояние и отслеживают действия, на которые вы переходите.

Магазин

Магазин – это объект, который объединяет действия и редукторы.

Как данные текут при использовании контекста и Redux?

Чтобы лучше всего продемонстрировать, как используются контекст и Redux, я создал песочницу кода, где я демонстрирую как Redux, так и контекст в небольшом приложении. В моем приложении каждый питомец либо спит, либо бодрствует. Нажмите на Проснись или Сон кнопки, чтобы увидеть, как каждое изображение питомца отображается с использованием Redux или Contex в консоли.

Если вы нажмите на Контекст Кнопка, консоль зарегистрирует, какие домашние животные были отображены с использованием контекста.

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

Есть несколько способов использовать Redux в приложении React. В Redux.js Файл, мы воспользовались некоторыми из API из пакета Redux Toolkit.

Это различные части, которые делают поток данных в демонстрации Redux:

• CreateAction () это вспомогательная функция, которая принимает объект восстановления функций среза и имя начального состояния. Он автоматически генерирует создателей действий и типы действий, которые соответствуют редукторам и состоянию.

• configurestore () это абстракция по стандарту Createstore в Redux, который создает глобальный магазин. В примере наш восстановитель передается.

• Connect () Эта функция соединяет компонент React в магазин Redux.

• Затем мы используем <Проводник> Чтобы сделать магазин доступным для компонентов.

Обратите внимание, как, когда вы нажимаете кнопку одного питомца, другие домашние животные не визуаливы в демонстрации Redux. Это потому, что в Connect () , когда Mapstate вызывается, он проверит, чтобы увидеть, изменилось ли государство или нет, только если оно будет повторно рендеринг. Это одно из преимуществ использования Redux и помогает оптимизировать более крупные приложения со многими изменяющимися состояниями.

Плюсы и минусы Redux и контекста

Как контекст, так и Redux – это способы управления состоянием в приложении React.

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

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

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

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

Оригинал: “https://dev.to/cs_carms/redux-vs-context-2b92”