为什么反应函数称为包装在调度内部？

Question

我只是在线浏览一些react-redux代码，基本上我遇到了以下代码集，该代码集基本上是一个充满ACTIONS的js文件，只是为了给上下文提供redux和redux的组合-thunk在这里使用：

export const init = () => async dispatch => {
  dispatch({ type: TYPES.SET_LOADING });
  await dispatch(getConfig());
  await dispatch(getGenres());
  dispatch({ type: TYPES.REMOVE_LOADING });
};

// Action Creator to get the config object from the API
export const getConfig = () => async dispatch => {
  const res = await tmdbAPI.get('/configuration');
  dispatch({
    type: TYPES.GET_CONFIG,
    payload: res.data,
  });
};

我对为什么getConfig函数被包装在dispatch中感到有些困惑？

Answer 1

如果您不想要，请不要将其包装 喜欢这样

export const init = () => async dispatch => {
  dispatch({ type: TYPES.SET_LOADING });
  dispatch(await getConfig());
  dispatch({ type: TYPES.REMOVE_LOADING });
};

//this is not using redux-thunk

// Action Creator to get the config object from the API
export const getConfig = async () => {
  const res = await tmdbAPI.get('/configuration');
  return {
    type: TYPES.GET_CONFIG,
    payload: res.data,
  };
};

重要
但是有很多原因决定为什么要通过分派来包装动作。

这里是一个示例。

当您想一步一步地获取多个数据

export const getData = () => async dispatch => {
  dispatch({
    type: DATA_LOADING_START
  });
  try {
    const res = await tmdbAPI.get('/url1');
    dispatch({
      type: DATA1_LOADED,
      payload: res.data,
    });
    const res = await tmdbAPI.get('/url2');
    dispatch({
      type: DATA2_LOADED,
      payload: res.data,
    });
  } catch (err) {
    // handle error
  }
  dispatch({
    type: DATA_LOADING_END
  });
};
//this is using redux-thunk

@AlexanderSolonik
问题： 为什么要通过派遣包装动作？

因为dispatch()将动作结果发送到减速器。

Answer 2

Redux thunk只是可以执行副作用的redux动作。所以

export const init = () => async dispatch => {
  dispatch({ type: TYPES.SET_LOADING });
  await dispatch(getConfig());
  await dispatch(getGenres());
  dispatch({ type: TYPES.REMOVE_LOADING });
};

只是一个异步初始化函数，当被调用时，它以同步方式执行步骤。

关键是thunk可以调度其他thunk / actions / etc，因此init thunk只是调度getConfig()动作，该动作本身是异步的，因此只有在配置完成后，才执行init函数的下一步API调用完成（可能是因为其他一些代码依赖于此）