反應 redux 不返回當前 state 值

Question

我對 redux thunk 有問題。 在 thunk 文件中，我使用調度操作並從 reducer 更改 isSuccess 和 isLoading 標志，但在組件中，在 API 調用之后，我得到了這些的先前值而不是當前值。

組件.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));
    });
};

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

我無法解決這個問題。 如果有人知道原因，請告訴我。 先感謝您！

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檢查來自 state 的請求的狀態，使用useSelector並根據該值觸發需要執行的操作。