React Redux не возвращает значение текущего состояния

У меня проблема с редукционным преобразователем в реакции. В файле thunk я использую для отправки действий и изменения флагов isSuccess и isLoading из редуктора, но в компоненте после вызова API я получаю их предыдущее значение вместо текущих.

components.jsx

 await addClient(valueToSubmit, employee.tenantId).then((response) => {
    if (isSuccess) {
      showToast(toastTypes.SUCCESS, translate("client_add_success"));
      resetForm();
      setSubmitting(false);
      toggleModal();
      setFieldsWithError([]);
    } else {
      showToast(
        toastTypes.ERROR,
        message.debugMessage?.includes("exist")
          ? translate("client_exist_error")
          : translate("client_add_error")
      );
      setFieldsWithError(message.payload);
    }
  });

thunk.js

export const addClient = (data, tenant) => async (dispatch) => {
  const tenantId = tenant?.replace(/['"]+/g, "");
  dispatch(requestAddClient());

  return await api(
    "post",
    apiUrl,
    data,
    tenant ? { "tenant-uuid": tenantId } : {},
    false
  )
    .then((response) => {
      return dispatch(receiveAddClient(response.data.payload));
    })
    .catch((err) => {
      return dispatch(errorAddClient(err.response));
    });
};

actions.js

export const requestAddClient = () => {
  return {
    type: REQUEST_ADD_CLIENT,
  };
};

export const receiveAddClient = (client) => {
  return {
    type: RECEIVE_ADD_CLIENT,
    client: client,
  };
};

export const errorAddClient = (message) => {
  return {
    type: ERROR_ADD_CLIENT,
    message,
  };
};

редуктор.js

case REQUEST_ADD_CLIENT:
      return {
        ...state,
        client: {},
        isSuccess: false,
        isLoading: true,
      };

    case RECEIVE_ADD_CLIENT:
      return {
        ...state,
        client: action.client,
        clients: [...state.clients, action.client],
        isSuccess: true,
        isLoading: false,
      };

    case ERROR_ADD_CLIENT:
      return {
        ...state,
        client: {},
        message: action.message.data,
        isSuccess: false,
        isLoading: false,
      };

и я не могу решить эту проблему. Если кто знает причину, подскажите. Заранее спасибо!


reactjs javascript redux state thunk
person simpller    schedule 11.03.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В преобразователь addClient вы можете перебросить поймать

.catch((err) => {
  dispatch(errorAddClient(err.response));
  return Promise.reject(err.response.data)
});

В вашем компоненте вы можете сделать:

await addClient(valueToSubmit, employee.tenantId).then(
  (response) => {
    showToast(
      toastTypes.SUCCESS,
      translate('client_add_success')
    );
    resetForm();
    setSubmitting(false);
    toggleModal();
    setFieldsWithError([]);
  },
  (message) => {
    //promise was rejected
    showToast(
      toastTypes.ERROR,
      message.debugMessage?.includes('exist')
        ? translate('client_exist_error')
        : translate('client_add_error')
    );
    setFieldsWithError(message.payload);
  }
);

Другой (лучший) способ сделать это — использовать useEffect, проверяя статус запроса из состояния с помощью useSelector и инициируя действия, которые необходимо выполнить на основе этого значения.

person HMR    schedule 11.03.2021
comment
Спасибо за ответ, но, кажется, я вообще не понял, что мне нужно делать. Что мне нужно сделать в useEffect? - person simpller; 11.03.2021