react 操作如何访问调度？答案

【问题标题】：How does a react action have access to dispatch?react 操作如何访问调度？
【发布时间】：2020-10-16 06:39:54
【问题描述】：

在我的 react 项目中，我有一个如下所示的操作文件：

const startLoad = () => async (dispatch) => {
  dispatch({
    type: CONTENT_LOAD,
  });
};

// Get all content
export const getContents = () => async (dispatch) => {
  dispatch(startLoad());
  // some more code...
};

所以在这个例子中，我知道调度来自middleware，并且getContents 可以访问它，因为它是使用mapDispatchToProps 映射的。所以我假设当getContents 被调用时，它真的是这样调用的-> dispatch(getContents) 但这可以用普通的JavaScript 复制，这样我就可以看到到底发生了什么？如果我对为什么 getContents 可以访问 dispatch 有错误，请告诉我。

例如，startLoad 怎么能仅仅因为dispatch 调用startLoad 而使用dispatch？我注意到，如果我这样称呼它，它也会起作用：dispatch(startLoad(dispatch));。

将调度传递给startLoad 实际上对我来说更有意义，所以我不明白为什么不需要这样做。

编辑：这是我自己想出的最接近的例子。

const fun = () => (fun2) => {
  fun2();
}

const fun2 = () => {
  console.log('hello');
}

fun()(fun2);

【问题讨论】：

标签： reactjs redux react-redux redux-thunk redux-store

【解决方案1】：

所以我假设当 getContents 被调用时，它真的被称为 this -> dispatch(getContents) 但这可以简单地复制吗 JavaScript，所以我可以看到真正发生了什么？如果我错了为什么 getContents 可以访问 dispatch 请告诉我。

redux-thunk has quite simple implementation

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => (next) => (action) => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

如您所见，它会检查动作是否为函数。

另外，如果你愿意，你可以在 dispatch 之后的 params 中获取整个状态和额外参数

例如 isstartLoad 是如何使用 dispatch 仅仅因为调度称为 startLoad？我注意到，如果我像这样调用它：dispatch(startLoad(dispatch));.

看起来中间件也可以处理上述情况。

【讨论】：