React redux 不返回当前状态值

Question

我在反应中遇到了 redux thunk 的问题。在 thunk 文件中，我使用 dispatch action 并从 reducer 更改 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,
  };
};

reducer.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,
      };

我无法解决这个问题。如果有人知道原因，请告诉我。提前谢谢！

Answer 1

在 addClient thunk 中你可以在 catch 中重新抛出

.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 的状态检查请求的状态，并根据该值触发需要执行的操作。