Во-первых, есть разница между React-Redux и Redux. Redux - это контейнер с предсказуемым состоянием для ЛЮБОГО приложения Javascript. Используете ли вы Angular, Ember или обычный Javascript.
Однако Redux чаще всего используется с ReactJS, используя пакет React-Redux. Это связано с тем, что React позволяет описывать ваш пользовательский интерфейс как функцию вашего текущего состояния. React-Redux позволяет вам связывать действия, которые вы создаете в Redux, с вашими компонентами React.
По сути, Redux похож на гигантский родительский компонент, который охватывает все ваше приложение React. Это позволяет Redux обрабатывать все ваше состояние на месте и сохранять его доступным для ВСЕХ ваших дочерних компонентов без необходимости явно вводить this.props.blahBlah для каждого чертовски дочернего компонента.
Звучит потрясающе и просто, правда? Что ж, на высоком уровне это так просто. Но у Redux есть ТОННА новых терминов, которые вам нужно выучить. Честно говоря, это, наверное, самая сложная часть. Когда вы находите руководство, которое говорит вам «отправить тип редуктора внутри вашего действия с асинхронной полезной нагрузкой», вы просто сидите там с открытым ртом.
React-Redux состоит из четырех основных частей.
Часть 1 - Состояние по умолчанию
Это должен быть объект, но это может быть просто пустой объект, если у вас нет статических данных, к которым вам нужен доступ.
Часть 2 - Магазин
Здесь находится все ваше состояние.
Чтобы создать свой магазин, вам необходимо передать ему свои редукторы (о которых мы поговорим дальше) и состояние вашего приложения по умолчанию.
Часть 3 - Редукторы
Редукторы - это чистые функции, которые выполняются в предыдущем состоянии вашего магазина, и действие, которое вы хотели бы использовать для преобразования магазина. Обычно это список операторов case.
Как видите, поскольку редукторы - это чистые функции, вы должны возвращать неизменяемую копию своего состояния с изменениями, которые вы хотите внести.
Часть 4 - Действия
Действия - единственный способ отправить изменения через редукторы в ваш магазин. В основном ваши действия - это функции, которые вы используете в своем фактическом компоненте React для передачи ваших изменений обратно в магазин.
Вот пример действия:
Довольно просто, правда? Что ж, вы можете спросить: «Но как мне использовать это в моем приложении React?» Вы используете встроенную функцию подключения React-Reduxs для сопоставления действий Redux через приложение React.
Теперь у вас есть доступ к действию changeUserInfo в КАЖДОМ компоненте React. Как это круто?!?!
Теперь вы можете перейти к своему компоненту входа в React, который вы создали, и запустить функцию changeUserInfo, когда кто-то заполнит вашу форму входа следующим образом:
Это основы React-Redux. А теперь вперед и творите красивые вещи!
