时间戳

首页 > 解决方案 > 调用多次调度后无法获取更新状态

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

问题描述

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

我尝试从不同的减速器调用调度并尝试在 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，但实际上它返回一个空白数组。

标签： reactjsreduxreact-reduxdispatch

解决方案

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

希望这可以帮助！

更新：

如果您已redux-think安装中间件并将其添加到 Redux（根据您的评论），那么接下来我会看看setLoader()- 看起来该函数已被 curried，我认为您不希望它成为。我将删除该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 });
  }
};

推荐阅读