Невозможно получить обновленное состояние после многократной отправки вызова

Question

Я использую избыточность с React для управления состояниями, но когда я вызвал две функции отправки из одного создателя действия, это возвращало состояние из первой отправки, но не смог получить обновленное состояние после другого вызова диспетчеризации.

Я пытался вызвать диспетчеризацию из разных редукторов и пытался вызвать после вызова 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;
    }
};

Вот мой компонент, связанный с приставкой:

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

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

Я ожидаю, что выходные данные вернут обновленный categoryList, но фактические данные возвращают пустой массив.

Answer 1

Вы выполняете асинхронную задачу в вашем создателе действий, которую Redux не может обработать без промежуточного программного обеспечения. Я рекомендую использовать промежуточное ПО redux-thunk . Это позволит вам выполнять асинхронные действия в создателях ваших действий и отправлять их несколько раз.

Надеюсь, это поможет!

---

UPDATE:

Если у вас установлено и добавлено промежуточное ПО 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 });
  }
};