redux 비동기 액션함수

const getRoomsInitData = data => async dispatch => {
    // localStorage에 캐싱된 데이터가 있는지 확인
    const _cacheData = JSON.parse(localStorage.getItem(COMMON.INIT_ROOMS_DATA_KEY));
    if (_cacheData) {
        dispatch({ type: GET_ROOMS_SUCCESS, payload: _cacheData });
        return;
    }

    try {
        dispatch({ type: GET_ROOMS_INIT_DATA });
        const response = await fetch(URL.ROOMS_INIT);
        // response 객체의 ok와 status가 정상 범위인지 확인
        if (!checkResponseData(response)) throw (`${response.status}Error! ${COMMON.GET_DATA_ERROR}`);

        const json = await response.json();
        localStorage.setItem(COMMON.INIT_ROOMS_DATA_KEY, JSON.stringify(json));
        dispatch({ type: GET_ROOMS_SUCCESS, payload: json });
    } catch (e) {
        dispatch({ type: GET_ROOMS_ERROR, payload: e });
    }
};

airbnb 프로젝트에 적용한 redux-thunk 액션 함수

에러 처리시 응답 객체의 'ok'와 'status'를 확인 하는식으로 한 이유는 잘못된 요청으로 400번대 status code가 떨어지는 상황에도 프로미스가 reject 되지 않았기 때문이다.

서버의 관점에서 클라이언트의 요청에 응답을 했고 정상적으로 통신이 종료되어 reject 되지 않는 것 같다. 백엔드 팀원과 조율이 필요한 부분이다.