Контроль состояния API в редукции, т. Е. PENDING, SUCCESS, FAILURE в сгенерированном коде реагирует на редукцию - PullRequest
Новая
       20

Контроль состояния API в редукции, т. Е. PENDING, SUCCESS, FAILURE в сгенерированном коде реагирует на редукцию

0 голосов
/ 08 февраля 2019

В приведенном ниже коде, сгенерированном jhipster, как инициируются ожидающие, успешные и неудачные действия?Для каждого типа действия, которое мы используем, к нему добавляется _PENDING или _SUCCESS или _FAILURE, и я не могу понять, где и как это происходит.Как я вижу в ожидании, состояния успеха и неудачи обрабатываются редуктором, я не понимаю, когда и где запускаются эти действия.

Например, в приведенном ниже коде первое действие имеет тип ACTION_TYPES.FETCH_MEDICINE_LIST = 'Medicine / FETCH_MEDICINE_LIST'.

Действительными действиями, которые фактически запускаются, являются медицина / FETCH_MEDICINE_LIST_PENDING, Medicine / FETCHESS_MEDSUCEESS_MESSE / FETCH/ FETCH_MEDICINE_LIST_FAILURE, когда действие лекарства / FETCH_MEDICINE_LIST получает триггер.Где и как инициируются действия государства 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
});

1 Ответ

0 голосов
/ 02 мая 2019

Действия запускаются с помощью redux-обещания-промежуточного программного обеспечения .

Для действия FOO с асинхронной полезной нагрузкой, избыточное-обещание-промежуточное программное обеспечение отправит 3 действия:

  • FOO_PENDING, немедленно
  • FOO_FULFILLED, после выполнения обещания
  • FOO_REJECTED, если обещание отклонено

REQUEST, SUCCESS и FAILURE - это всего лишь три простые функции в JHispter, облегчающие использование промежуточного программного обеспечения redux-обещания. 

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