Как действие и редукторы связаны друг с другом в реагирующем редуксе

Question

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

Answer 1

TLDR: диспетчеризация функция принимает action в качестве аргумента и вызывает currentReducer(..., action).

---

При вызове creteStore (reducer) возвращаемый объект содержит функции dispatch и subscribe.

Когда вы (или библиотека реагировать на избыточность) вызываете subscribe(listener), резервная копия запомнит вашу функцию слушателя (в случае с React слушатель должен убедитесь, что компонент повторно выполняет рендеринг с новым реквизитом, контекстом, состоянием или ссылками - в зависимости от конкретной реализации).

При отправке действия с помощью dispatch(action) функция диспетчеризации вызовет reducer(action, state), измените избыточность внутренний currentState, затем вызвать каждый listener().

Answer 2

Обзор очень высокого уровня

Действие - Действия могут обновлять состояние

{ type: ACTION_TYPE, somePayload: payload }

Резервное хранилище предоставляет функцию dispatch , что в конечном итоге оборачивает создателя действия.

mapDispatchToProps = dispatch => {
  return {
    someWrappedAction: () => dispatch(actionCreatorFn()),
    someOtherWrappedAction: val => dispatch(otherActionCreatorFn(val)),
  }
}

useDispatch Крюк возвращает dispatch, и вы заверните действие самостоятельно

const dispatch = useDispatch()

<button onClick={() => dispatch(someActionCreatorFn())}>
  Do Action
</button>

Редуктор

Редукторы формируют дерево состояний, начиная с редуктора root, передаваемого в хранилище редуксов. «Соединение» осуществляется (условно) через mapDispatchToProps и connect HO C. ( Теперь можно получить dispatch из useDispatch hook )

Редукторы - это функции pure , которые принимают два аргумента, текущее состояние и действие, и возвращают следующее состояние.

(currentState, action) => nextState

Когда вы отправляете создателя действия, он передает объект действия редуктору root. Объект действия пропускается через все дерево состояний, и любые редукторы, обрабатывающие действие type, потребляют его.