redux中的API状态控制，即react-redux jhipster生成的代码中的PENDING、SUCCESS、FAILURE

Question

在下面的 jhipster 生成的代码中，如何触发操作的挂起、成功和失败？对于我们使用的每种操作类型，它都附加有 _PENDING 或 _SUCCESS 或 _FAILURE，我无法弄清楚它在哪里以及如何发生。正如我所看到的，待处理、成功和失败状态正在由减速器处理，我不明白这些操作何时何地被触发。

例如，在下面的代码中，第一个操作的类型为 ACTION_TYPES.FETCH_MEDICINE_LIST = 'medicine/FETCH_MEDICINE_LIST'。

当medicine/FETCH_MEDICINE_LIST操作被触发时，实际触发的操作是medicine/FETCH_MEDICINE_LIST_PENDING、medicine/FETCH_MEDICINE_LIST_SUCCESS、medicine/FETCH_MEDICINE_LIST_FAILURE。Api 状态操作在何处以及如何触发？

import { ICrudGetAction, ICrudGetAllAction, ICrudPutAction, ICrudDeleteAction } from 'react-jhipster';

import { cleanEntity } from 'app/shared/util/entity-utils';
import { REQUEST, SUCCESS, FAILURE } from 'app/shared/reducers/action-type.util';

import { IMedicine, defaultValue } from 'app/shared/model/medicine.model';

export const ACTION_TYPES = {
  FETCH_MEDICINE_LIST: 'medicine/FETCH_MEDICINE_LIST',
  FETCH_MEDICINE: 'medicine/FETCH_MEDICINE',
  CREATE_MEDICINE: 'medicine/CREATE_MEDICINE',
  UPDATE_MEDICINE: 'medicine/UPDATE_MEDICINE',
  DELETE_MEDICINE: 'medicine/DELETE_MEDICINE',
  RESET: 'medicine/RESET'
};

const initialState = {
  loading: false,
  errorMessage: null,
  entities: [] as ReadonlyArray<IMedicine>,
  entity: defaultValue,
  updating: false,
  updateSuccess: false
};

export type MedicineState = Readonly<typeof initialState>;

// Reducer

export default (state: MedicineState = initialState, action): MedicineState => {
  switch (action.type) {
    case REQUEST(ACTION_TYPES.FETCH_MEDICINE_LIST):
    case REQUEST(ACTION_TYPES.FETCH_MEDICINE):
      return {
        ...state,
        errorMessage: null,
        updateSuccess: false,
        loading: true
      };
    case REQUEST(ACTION_TYPES.CREATE_MEDICINE):
    case REQUEST(ACTION_TYPES.UPDATE_MEDICINE):
    case REQUEST(ACTION_TYPES.DELETE_MEDICINE):
      return {
        ...state,
        errorMessage: null,
        updateSuccess: false,
        updating: true
      };
    case FAILURE(ACTION_TYPES.FETCH_MEDICINE_LIST):
    case FAILURE(ACTION_TYPES.FETCH_MEDICINE):
    case FAILURE(ACTION_TYPES.CREATE_MEDICINE):
    case FAILURE(ACTION_TYPES.UPDATE_MEDICINE):
    case FAILURE(ACTION_TYPES.DELETE_MEDICINE):
      return {
        ...state,
        loading: false,
        updating: false,
        updateSuccess: false,
        errorMessage: action.payload
      };
    case SUCCESS(ACTION_TYPES.FETCH_MEDICINE_LIST):
      return {
        ...state,
        loading: false,
        entities: action.payload.data
      };
    case SUCCESS(ACTION_TYPES.FETCH_MEDICINE):
      return {
        ...state,
        loading: false,
        entity: action.payload.data
      };
    case SUCCESS(ACTION_TYPES.CREATE_MEDICINE):
    case SUCCESS(ACTION_TYPES.UPDATE_MEDICINE):
      return {
        ...state,
        updating: false,
        updateSuccess: true,
        entity: action.payload.data
      };
    case SUCCESS(ACTION_TYPES.DELETE_MEDICINE):
      return {
        ...state,
        updating: false,
        updateSuccess: true,
        entity: {}
      };
    case ACTION_TYPES.RESET:
      return {
        ...initialState
      };
    default:
      return state;
  }
};

const apiUrl = 'api/medicines';

// Actions

export const getEntities: ICrudGetAllAction<IMedicine> = (page, size, sort) => ({
  type: ACTION_TYPES.FETCH_MEDICINE_LIST,
  payload: axios.get<IMedicine>(`${apiUrl}?cacheBuster=${new Date().getTime()}`)
});

export const getEntity: ICrudGetAction<IMedicine> = id => {
  const requestUrl = `${apiUrl}/${id}`;
  return {
    type: ACTION_TYPES.FETCH_MEDICINE,
    payload: axios.get<IMedicine>(requestUrl)
  };
};

export const createEntity: ICrudPutAction<IMedicine> = entity => async dispatch => {
  const result = await dispatch({
    type: ACTION_TYPES.CREATE_MEDICINE,
    payload: axios.post(apiUrl, cleanEntity(entity))
  });
  dispatch(getEntities());
  return result;
};

export const updateEntity: ICrudPutAction<IMedicine> = entity => async dispatch => {
  const result = await dispatch({
    type: ACTION_TYPES.UPDATE_MEDICINE,
    payload: axios.put(apiUrl, cleanEntity(entity))
  });
  dispatch(getEntities());
  return result;
};

export const deleteEntity: ICrudDeleteAction<IMedicine> = id => async dispatch => {
  const requestUrl = `${apiUrl}/${id}`;
  const result = await dispatch({
    type: ACTION_TYPES.DELETE_MEDICINE,
    payload: axios.delete(requestUrl)
  });
  dispatch(getEntities());
  return result;
};

export const reset = () => ({
  type: ACTION_TYPES.RESET
});

Answer 1

这些操作由redux-promise-middleware触发。

FOO对于具有异步负载的操作，redux-promise-middleware 将调度 3 个操作：

• FOO_PENDING， 立即地
• FOO_FULFILLED，一旦承诺得到解决
• FOO_REJECTED，如果承诺被拒绝

REQUEST、SUCCESS 和 FAILURE 只是 JHispter 中的 3 个简单函数，以方便使用 redux-promise-middleware。

export const REQUEST = actionType => `${actionType}_PENDING`;
export const SUCCESS = actionType => `${actionType}_FULFILLED`;
export const FAILURE = actionType => `${actionType}_REJECTED`;