Чтобы помочь моему пониманию…
Redux — это библиотека управления состоянием, которую можно использовать с React. Он помещает все данные в один отдельный объект состояния, называемый хранилищем. Все компоненты могут подключаться к этому хранилищу и получать его данные через реквизиты или могут отправлять действие для возврата нового хранилища, которое обновляет состояние. На изображении ниже представлен классный способ представления состояния в Redux, показывающий единое центральное состояние, с которым компоненты связаны (или на которые подписаны) и через которое обновляются.
mapDispatchToProps
После установки Redux в наше приложение React нам нужно связать React с Redux с помощью официального пакета под названием `react-redux`. Это позволит компонентам React получать данные из хранилища Redux, а также отправлять действие для создания нового хранилища с обновленными данными. Этот пакет дает нам доступ к методу connect(), который принимает два аргумента: mapStateToProps и mapDispatchToProps.
Аргумент mapStateToProps позволяет нашему компоненту подключаться (или подписываться) к хранилищу, получать атрибуты состояния текущего хранилища и сопоставлять эти атрибуты с реквизитами компонента, чтобы мы могли использовать их для отображения или обработки этих данных так, как мы хотим в компоненте. Состояние хранилища Redux передается в функцию, и эта функция затем возвращает объект с этим состоянием в качестве свойств компонента.
Второй аргумент было сложнее понять для меня в потоке Redux. На приведенной ниже диаграмме указано: Component -> Dispatch Action -> Reducer -> Redux Store -> затем обратно в Component. Чтобы внести изменения или обновить состояние, нам нужно отправить действие из компонента. Еще одна диаграмма, которую я нашел, когда впервые изучал поток Redux, гласила: Action Creator -> Action -> Dispatch -> Reducers -> State. Однако для понимания функции `connect()` мне кажется, что диаграмма ниже имеет больше смысла.
Чтобы сделать запрос на выборку (для обновления хранилища и внутреннего API), мы используем mapDispatchToProps. Функция mapDispatchToProps отправляет действия для обновления хранилища. Мы можем создать стрелочную функцию с именем mapDispatchToProps, которая возвращает объект с функциями, которые мы хотим сопоставить с компонентом. Например, у нас может быть функция удаления или добавления, которая отправляет это действие. Это действие будет иметь тип и полезную нагрузку для этого действия.
В своем проекте я использовал промежуточный пакет «thunk», который обрабатывает асинхронные вызовы Javascript и обещания выборки. Вместо простого объекта, возвращаемого в моем действии `createRestaurant`, я могу вернуть функцию отправки. Этот создатель действия `createRestaurant` передается в качестве аргумента в mapDispatchToProps и при вызове в моем компоненте `RestaurantInput` возвращает функцию отправки с ключом типа и полезной нагрузкой данных JSON из API, которые затем будут отправлены. редуктору, чтобы обновить мой магазин обновленными данными. Завершить
Источники:
Codepocalypse Now Redux (или когда отправлять выборку в ваш API в жизненном цикле Redux)
Полное руководство по React (и Redux) № 42 — Map Dispatch To Props
