Когда я должен добавить Redux в приложение React?

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

Я рекомендую приложение, которое вы уже построен с "просто реагировать" и посмотреть, как Redux может вписаться в него. Смотрите, если вы можете изящно ввести его, вырывая один кусок состояния или набор "действий" в то время. Рефакторинг к нему, не зацикливаясь на Большом взрыве переписать ваше приложение. Если у вас все еще возникают проблемы с тем, где это может добавить ценность, то это может быть признаком того, что ваше приложение либо недостаточно большое, либо достаточно сложное, чтобы заслужить что-то вроде Redux поверх React.

Если вы еще не сталкивались с этим еще, Дэн (ответ выше) имеет большой короткий видеоряд, который проходит через Redux на более фундаментальном уровне. Я настоятельно рекомендую потратить некоторое время на поглощение его частей:https://egghead.io/series/getting-started-with-redux

Redux также имеет некоторые довольно большие документы. Особенно объясняя много "почему", таких как http://redux.js.org/docs/introduction/ThreePrinciples.html

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

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

посмотрите на это изображение, чтобы понять, что Redux делает сначала с первого взгляда:

кроме этого, как я полагаю, представить себя:

возвращение является предсказуемым контейнером состояний для приложений JavaScript.

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

вы можете использовать Redux вместе с React или с любой другой библиотекой представлений. Он крошечный (2kB, включая зависимости).

также согласно документации, есть три принципа для Redux как показано ниже:

1. Один источник правда

2. Состояние доступно только для чтения

3. Изменения вносятся с помощью чистых функций

так что в основном, когда вам нужно в одном магазине, чтобы отслеживать все, что вам нравится в вашем приложении, то Redux удобно, вы можете получить доступ к нему в любом месте вашего приложения, в любом маршруте... просто используя store.getState();

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

просто если ваше приложение будет большим, со многими компонентами, состояниями и маршрутизацией, попробуйте реализовать Redux с самого начала! Это поможет вам в пути наверняка!

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

но по мере роста приложения становится трудно управлять состояниями и преобразованиями состояний.Состояние и преобразования состояния необходимо правильно отслеживать для отладки приложений.

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

концепция redux может быть объяснена на следующем рисунке.

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

поскольку состояние управляется глобально и с redux его легче поддерживать.

Это, как я полагаю, работает. Действие отправляется из любого компонента или представления. Действие должно иметь свойство " тип " и может быть любым свойством, которое содержит информацию о произошедшем действии. Данные, переданные в действии, могут иметь отношение к другому редуктору, поэтому один и тот же объект передается другому редуктору. Каждый редуктор принимает / оформляет свою часть / вклад в состояние. Затем вывод объединяется и формируется новое состояние, а компонент, который должен быть подписаться на событие изменения состояния получает уведомление.

в приведенном выше примере коричневый цвет имеет все 3 компонента RGB. Каждый редуктор получает такой же коричневый цвет и они отделяют вне свой вклад к цвету.