redux-thunk-routine.medium.part1.ts

// 1. Define the constants
const FETCH_DATA_REQUEST: string = 'FETCH_DATA/REQUEST';
const FETCH_DATA_SUCCESS: string = 'FETCH_DATA/SUCCESS';
const FETCH_DATA_FAILURE: string = 'FETCH_DATA/FAILURE';
 
// 2. Define action creators
const fetchDataRequest: () => Action<void> = createAction(FETCH_DATA_REQUEST);
const fetchDataSuccess: (payload: DataType) => Action<DataType> = createAction(FETCH_DATA_SUCCESS);
const fetchDataFailure: (payload: Error) => Action<Error> = createAction(FETCH_DATA_FAILURE);
 
// 3. Create a thunk
const fetchData = () => async (dispatch: Dispatch, getState: () => RootState) => {
  dispatch(fetchDataRequest());
  try {
    const data = await api.fetchData();
    dispatch(fetchDataSuccess(data));
  } catch (e) {
    dispatch(fetchDataFailure(e));
  }
}
 
// 4. Handle actions in reducers
if (action.type === FETCH_DATA_REQUEST) {
    return {
        ...state,
        isFetching: true,
        error: null
    };
}
 
if (action.type === FETCH_DATA_SUCCESS) {
    return {
        ...state,
        isFetching: false,
        data: action.payload,
        error: null
    };
}
 
if (action.type === FETCH_DATA_FAILURE) {
    return {
        ...state,
        isFetching: false,
        error: action.payload
    };
}