КОДЕКС

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 в корневой папке и импортируйте следующее:

  1. Provider (response-redux) - предоставляет приложению, заключенному в него, доступ к состояниям, управляемым Redux.
  2. createStore (Redux) - создайте экземпляр магазина, в котором будут храниться состояния.
  3. applyMiddleware (Redux) - примените промежуточное программное обеспечение обработки Redux по вашему выбору, например redux-thunk или redux-saga.
  4. createSagaMiddleware (redux-saga) - создайте экземпляр промежуточного программного обеспечения Saga, которое будет отвечать за запуск файлов саги в вашем проекте.
  5. rootReducer (из проекта) - корневой файл редуктора, в котором вы объединяете все файлы редуктора.
  6. rootSaga (из проекта) - корневой файл саги, в котором вы объединяете все файлы саги.

Затем создайте экземпляры Saga и store и заключите свое приложение в Provider.

connect, mapStateToProps и mapDispatchToProps

Чтобы получить доступ к состояниям Redux в любом месте вашего проекта, вы можете использовать функцию connect из библиотеки response-redux.

Функция connect принимает в свои параметры две другие функции, а именно:

  1. mapStateToProps - сопоставьте ссылку на ваши предпочтительные состояния в свойствах компонента.
  2. 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