2

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

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

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

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

例如，如何startLoad能够使用dispatch仅仅因为dispatch被调用startLoad？我注意到，如果我这样称呼它，它也会起作用：dispatch(startLoad(dispatch));.

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

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

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

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

fun()(fun2);
4

1 回答 1

2

所以我假设当 getContents 被调用时，它真的像这样调用 -> dispatch(getContents) 但这可以用普通的 JavaScript 复制，这样我就可以看到到底发生了什么？如果我对 getContents 为什么可以访问调度有误，请告诉我。

redux-thunk 的实现非常简单

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

    return next(action);
  };
}

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

还有额外的好处，如果你愿意，你可以在派发后的 params 中获得整个状态和额外的参数

例如，startLoad 是如何仅仅因为 dispatch 调用了 startLoad 就可以使用 dispatch 的？我注意到，如果我这样称呼它，它也会起作用：dispatch(startLoad(dispatch));。

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

于 2020-06-25T18:17:35.120 回答