调用多次调度后无法获取更新状态

Question

我正在使用带有 React 的 redux 来管理状态，但是当我从一个动作创建者调用两个调度函数时，它从第一次调度返回状态，但在另一个调度调用之后无法获取更新状态。

我尝试从不同的 reducer 调用 dispatch 并尝试在 API 调用后调用。

这是我的行动。

export const setLoader = (loader) => dispatch => {
  dispatch({ type: SET_LOADER, payload: loader });
};

export const fetchCategory = (setLoader) => async dispatch => {
    setLoader(true);
    try {
        const instance = axios.create();
        instance.defaults.headers.common['Authorization'] = AUTHORIZATION_TOKEN;
        const response = await instance.get(API_PATHS.SERVICE_CATEGORY_API);

        dispatch({ type: FETCH_CATEGORY, payload: response.data });

    } catch (e) {
      setLoader(false);
    }

};

在这里我定义了减速器：

export default (state = INITIAL_STATE, action) => {

    switch (action.type) {
    case FETCH_CATEGORY:
        return { ...state, categoryList: action.payload };
    case SET_LOADER:
        return { ...state, isLoading: action.payload };
    default:
        return state;
    }
};

这里我的组件与 redux 连接：

const mapStateToProps = state => {
  return ({
      categoryList: state.locator.categoryList
  });
}

export default connect(
    mapStateToProps,
    { fetchCategory, setLoader }
)(ServiceLocator);

我希望输出返回更新后的 categoryList，但实际上它返回的是一个空白数组。

Answer 1

您正在操作创建器中执行异步任务，如果没有中间件，Redux 无法处理。我推荐使用中间件redux-thunk。这将允许您在操作创建器中执行异步操作并多次分派。

希望这会有所帮助！

---

更新：

如果您已安装 redux-think 中间件并将其添加到 Redux（根据您的评论），那么接下来我将查看 setLoader() - 看起来该函数已被咖喱，我认为您不希望它成为.我将删除setLoader() 步骤并直接从fetchCategory() 分派该操作：

export const fetchCategory = () => async dispatch => {
  dispatch({ type: SET_LOADER, payload: true });
  try {
    const instance = axios.create();
    instance.defaults.headers.common['Authorization'] = AUTHORIZATION_TOKEN;
    const response = await instance.get(API_PATHS.SERVICE_CATEGORY_API);

    dispatch({ type: FETCH_CATEGORY, payload: response.data });

  } catch (e) {
    dispatch({ type: SET_LOADER, payload: false });
  }
};