React-Redux предоставляет нам две важные функции для работы с нашим состоянием и свойствами. Это mapStateToProps и mapDispatchToProps
На самом базовом уровне…
mapStateToProps соединяет состояние редукции с реквизитами компонента реакции.
mapDispatchToProps соединяет избыточные действия с реагирующими свойствами.
В нашем компоненте верхнего уровня (приложении) наш экспорт имеет подключение, которое принимает два аргумента. Первый аргумент — mapStateToProps. Наш второй mapDispatchToProps. Оба аргумента касаются currentUser.
mapStateToProps вызывается каждый раз при изменении состояния хранилища. Он должен возвращать объект данных, необходимых этому компоненту. Мы спрашиваем наш магазин о нашем currentUser и данных, которые к нему привязаны. Мы передадим состояние из нашего хранилища компоненту, чтобы мы могли работать с данными.
mapDispatchToProps — наш второй аргумент, который в данном случае является объектом. Теперь он должен найти свой actionCreator.
Поскольку ранее мы импортировали действие getCurrentUser вверху нашего компонента, мы можем напрямую отправить наше действие непосредственно из нашего компонента, чтобы найти точное actionCreator, которое нам нужно.
Мы находим наше действие, которое в данном случае является GET запросом к серверной части, чтобы найти нашего пользователя.
Отсюда мы перейдем к нашему редуктору currentUser
Редьюсер принимает состояние и действие в качестве аргументов, а затем проверяет наш оператор case, чтобы сообщить нашему действию, как мы собираемся управлять этим состоянием.
Затем мы посещаем наш магазин, который является привратником нашего штата. По сути это наш гаишник. Он говорит нам, куда идет наше состояние.
И, наконец, мы возвращаемся к нашему компоненту и можем сопоставить наше состояние с реквизитами нашего компонента. Получается красивый аккуратный круг (или ромб, как показано на моем грубом рисунке).
Первоначально опубликовано на https://sedx876.github.io 15 октября 2020 г.
