react redux 中 action 和 reducer 是如何连接的答案

【问题标题】：How action and reducers are connected with each other in react reduxreact redux 中 action 和 reducer 是如何连接的
【发布时间】：2020-04-18 09:24:49
【问题描述】：

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

【问题讨论】：

标签： reactjs react-redux

【解决方案1】：

非常高级的概述

动作 - 动作可以更新状态

{ type: ACTION_TYPE, somePayload: payload }

redux 存储公开了一个 dispatch 函数，该函数最终包装了一个动作创建者。

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 形成一个状态树，从传递给 redux 存储的根 reducer 开始。 “连接”（通常）通过mapDispatchToProps 和connect HOC 进行。（现在可以从useDispatch钩子中获取dispatch）

Reducer 是纯函数，它接受两个参数，当前状态和一个动作，并返回下一个状态。

(currentState, action) => nextState

那么 mapDispatchToProps 中的每个 dispatch 是如何连接到适当的 reducer...

当您调度一个动作创建者时，它会将动作对象传递给根减速器。 action 对象通过整个状态树传递，任何处理 action type 的 reducer 都会使用它。

【讨论】：

我没有完全理解。我在容器中没有 mapDispatchToProps 函数。我只有 mapStateToProps。
@Nilesh 好的，在您的问题中，您询问了 action 和 reducer 之间的关系。 mapStateToProps 函数是 connect 的第一个参数，它只是返回一个将 redux 状态映射到传递给组件的 props 的对象。
解决了我对连接动作和减速器的疑问，谢谢。我们在传递有效负载等时导入每个动作在调度中定义和使用的内容
@DrewReese 你是说如果我运行一个动作，每个减速器都会参与其中，直到找到匹配的type？
@Melly 是的，有点；当您向 redux 存储发送一个操作时，每个 reducer 函数都会对其进行操作，或者通过专门处理该操作并返回 some 新状态切片，或者使用默认情况并返回当前状态片。任何 reducer 函数都可以潜在地处理任何调度的操作。

【解决方案2】：

TLDR：dispatch 函数将action 作为参数并调用currentReducer(..., action)。

调用creteStore(reducer)时，返回的对象包含dispatch和subscribe函数。

当你（或 react-redux 库）调用 subscribe(listener) 时，redux 会记住你的监听器函数（在 React 的情况下，监听器必须确保组件使用新的 props、上下文、状态或 refs 重新渲染- 取决于具体的实现）。

用dispatch(action) dispatch action 时，dispatch 函数会调用reducer(action, state)，修改redux 内部currentState 然后调用每个listener()。

【讨论】：