Redux store.dispatch 目的

Question

我正在审查 TypeScript function 它执行一些算法逻辑并试图了解逻辑实际发生的位置

private DoSomeAlgorithmicLogic(nodeIds: any) {
  const obj = CreateObject(nodeIds);
  this.store.dispatch(new GetNodes(obj));
  }

CreateObject填充了obj的各种属性， GetNodes是这样的：

export class GetNodes implements Action {
  readonly type = GET_NODES;
  constructor(public payload: any) {
  }
}

我尝试在这里阅读有关商店和调度的信息，但不确定我是否理解所提出的概念。

我真正需要的是关于如何进一步调查/调试此功能以查找逻辑发生位置的指针，但很高兴获得有关应用程序 state 树的进一步说明以及此行与它的关系（尤其是应该是的参数传递给dispatch() )。

Answer 1

动作创作者

看起来写这段代码的人对 OOP 有点过于兴奋，而忽略了 Redux 的原理。 动作应该是可序列化的，因此使用class作为动作创建者不是一个好主意。

dispatch是一个 function ，它需要一个Action 。 一个Action是一个 object type: string属性，可能还有一些其他数据。 所以你可以打电话：

dispatch({type: MY_ACTION});
dispatch({type: MY_ACTION, payload: someData});

但通常我们使用动作创建函数来创建动作 object。 这就是class GetNodes正在做的事情，但这是一种奇怪的方法。 它可能应该只是一个 function：

export const getNodes = (payload: any): Action => ({
  type: GET_NODES,
  payload
})

我讨厌这个payload: any因为any真的违背了使用 Typescript 的意义。 它可能应该类似于payload: Node[] 。

使用动作创建器 function，您可以调用：

dispatch(getNodes(obj));

---

逻辑

动作创建者通常没有任何逻辑。 他们只是将 arguments 安排到一个Action object 中。

Redux 逻辑发生在减速器中。 reducer 是一个 function，它采用当前的state和调度的action并返回下一个 state。

const myReducer = (state: MyState, action: Action): MyState => {...

当您创建商店实例时，reducer 作为参数传递。 您将找到一个减速器 function 或一个 function 通过调用combineReducers创建的 map2668CFDE6311B4BEBer6 函数。 查找this.store的设置位置并查找createStore的第一个参数。 这就是减速器 function ，您将在其中找到处理各种操作的所有逻辑。