reactjs - 在 react redux 中 action 和 reducer 如何相互连接

Question

我是 react 和 redux 的新手。我已经浏览了许多关于 react redux 的在线教程，但仍然无法理解 action 和 reducer 是如何连接的。如果我是对的，我们在容器/组件中导入 action，在我们创建 store 的文件中导入 reducer。所以container-action之间有联系，reducer和store之间也有联系，但是在action文件中我们没有导入reducer。那么 action 是如何连接到 reducer 的。我知道我们有一种 Action 类型，将在 reducer 的开关盒中检查。但是它如何传递给reducer。

Answer 1

非常高级的概述
行动 - Action 可以更新状态

{ type: ACTION_TYPE, somePayload: payload }

redux store 暴露了一个 dispatch函数，最终包装了一个 Action 创建者。

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

useDispatch钩子(Hook)返回 dispatch你自己包装行动

const dispatch = useDispatch()

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

reducer
reducer 形成一个状态树，从传递给 redux 存储的根 reducer 开始。 “连接”是通过(通常)通过 mapDispatchToProps 进行的和 connect高阶(现在可以从 dispatch 钩子(Hook)获取 useDispatch)
reducer 是 纯函数接受两个参数，当前状态和一个 Action ，并返回下一个状态。

(currentState, action) => nextState

So how is each dispatch in mapDispatchToProps connected to the appropriate reducer...

当您分派(dispatch) Action 创建者时，它会将 Action 对象传递给根 reducer 。 Action 对象通过整个状态树和任何处理 Action 的 reducer type消耗它。