КОДЕКС
React-Redux для Непосвященных (при участии Redux-Saga) - Часть 4
Часть 1: https://medium.com/codex/react-redux-for-the-uninitiated-feat-redux-saga-part-1-8cff10003e00
Часть 2: https://medium.com/codex/react-redux-for-the-uninitiated-feat-redux-saga-part-2-2a747c74ba91
Часть 3: https://medium.com/codex/react-redux-for-the-uninitiated-feat-redux-saga-part-3-c068e95e634c
Резюме
В этой заключительной части я резюмирую все в небольшом формате, чтобы вам было легче вспомнить, когда вам понадобится еще одно освежение слов с гораздо меньшим количеством слов.
Иерархия
Иерархия goto для моих состояний Redux следующая:
+--/src | +--/redux | | +--/actions | | +--/reducers | | +--/sagas
Есть и другие способы изменить эту структуру папок, например организовать их по функциям:
+--/src | +--/redux | | +--/authentication | | | +--/auth.action.js | | | +--/auth.reducer.js | | | +--/auth.saga.js | | +--/users | | | +--/users.action.js | | | +--/users.reducer.js | | | +--/users.saga.js
Действие
Действие состоит из двух основных компонентов: ACTION_TYPE и функции действия.
Редуктор
Редуктор состоит из двух основных компонентов: initialState и функции редуктора по умолчанию, которая управляет состояниями.
Сага
Сага состоит из двух основных компонентов: rootSaga и функции саги.
Объединить несколько состояний
Чтобы объединить несколько редукторов, импортируйте combReducers из библиотеки Redux, а также редукторы в свой проект. Оберните редукторы в combReducers следующим образом:
Чтобы объединить несколько саг, импортируйте функцию «все» из ReduxSaga / Effects, а также саги в свой проект. Оберните саги словом «все» следующим образом:
Советы. Вам будет проще всего лишь комбинировать редукторы и саги, как только вы начнете настраивать Redux для своего проекта. .
Наконец, провайдер
У вас не будет доступа ни к одному из перечисленных выше состояний, пока вы не настроите их в Redux Provider, которым будет обернуто ваше приложение.
Для начала перейдите к index.js в корневой папке и импортируйте следующее:
- Provider (response-redux) - предоставляет приложению, заключенному в него, доступ к состояниям, управляемым Redux.
- createStore (Redux) - создайте экземпляр магазина, в котором будут храниться состояния.
- applyMiddleware (Redux) - примените промежуточное программное обеспечение обработки Redux по вашему выбору, например redux-thunk или redux-saga.
- createSagaMiddleware (redux-saga) - создайте экземпляр промежуточного программного обеспечения Saga, которое будет отвечать за запуск файлов саги в вашем проекте.
- rootReducer (из проекта) - корневой файл редуктора, в котором вы объединяете все файлы редуктора.
- rootSaga (из проекта) - корневой файл саги, в котором вы объединяете все файлы саги.
Затем создайте экземпляры Saga и store и заключите свое приложение в Provider.
connect, mapStateToProps и mapDispatchToProps
Чтобы получить доступ к состояниям Redux в любом месте вашего проекта, вы можете использовать функцию connect из библиотеки response-redux.
Функция connect принимает в свои параметры две другие функции, а именно:
- mapStateToProps - сопоставьте ссылку на ваши предпочтительные состояния в свойствах компонента.
- mapDispatchToProps - сопоставьте ссылку на вашу функцию запуска событий Redux (также известную как «функция отправки») в свойства компонента.
Чтобы получить состояние, сделайте ссылку на него в mapStateToProps в следующем формате:
anyStateName: state.yourPreferedReducer.valueYouNeed
Чтобы объявить функцию запуска Redux, сначала импортируйте события действия, затем объявите их в mapDispatchToProps, заключив их в оболочку с помощью функции dispatch в следующем формате:
anyFnName: (param) => dispatch(actionEvents.sampleFn(param));
Затем вы можете получить доступ к этим состояниям в свойствах вашего компонента:
Если вам когда-нибудь понадобится больше ссылок, ознакомьтесь с исходными материалами, созданными для этой серии: https://github.com/zhifez/react-redux-for-the-uninitiated