Простое объяснение React-Redux (2/2)

В предыдущей статье я рассмотрел цикл Redux. Эта статья будет посвящена React-Redux. Во-первых, почему react-redux? По мере продолжения работы над приложением управление состоянием может стать очень запутанным. React-Redux - это система управления состоянием, упрощающая управление состоянием.

Шаблон React-Redux:

Если вы хотите создать действие или редуктор, рекомендуется создавать папки с именами « Действия» и « Редукторы» на верхнем уровне папки src . Внутри обеих папок создайте файл index.js . Теперь у вас должно быть 3 файла index.js .

В исходном файле index.js, к которому вы прикрепляете файл App.js , import {Provider} from 'react-redux'и import {createStore} from 'redux'. Оберните компонент приложения в провайдеры следующим образом:

Теперь большая часть вашего шаблона готова. Отсюда вы можете создавать свои действия. внутри файла index.js внутри папки действий процесс в точности такой, как было показано ранее, за исключением предварительного оператора экспорта . Важно знать, что вы не должны использовать экспорт по умолчанию.

В вашем файле редукторов import {combineReducers} from 'redux'и создайте свои редукторы. Разница здесь заключается в экспорте редукторов по умолчанию .:

Информация ранее была в основном повторением и интеграцией редукторов в React, в этом разделе будут рассмотрены некоторые явные различия:

Какой бы файл вы ни хотели вызвать State, вы должны сначала import {connect} from 'react-redux'подключить его к своему экспорту по умолчанию следующим образом:

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

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

Теперь вы можете создавать приложения так же, как и раньше, за исключением React-Redux.