18장 리덕스 미들웨어를 통한 비동기 작업 관리

18.1 작업 환경 준비

18.2 미들웨어란?

18.2.1 미들웨어 만들기

18.2.2 redux-logger 사용하기

//미들웨어 생성
const loggerMiddleWare = store => next => action => {
    console.group(action && action.type);
    console.log('이전 상태', store.getState());
    console.log('액션', action);
    next(action);
    console.log('다음 상태', store.getState());
    console.groupEnd();
};

export default loggerMiddleWare;


//미들웨어 적용
import loggerMiddleware from "./lib/loggerMiddleware";
import {createLogger} from 'redux-logger'; //redux-logger 사용하기

const logger = createLogger();
const store = createStore(rootReducer, applyMiddleware(logger));
//const store = createStore(rootReducer, applyMiddleware(loggerMiddleware));

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('root')
);

18.3 비동기 작업을 처리하는 미들웨어 사용

• redux-thunk : 가장 많이 사용하는 비동기 처리 미들웨어. 객체가 아닌 함수 형태의 액션을 디스패치 할 수 있게 해 줌.
• redux-saga : redux-thunk 다음으로 많이 사용되는 비동기 처리 미들웨어. 특정 액션 디스패치 후, 다른 액션을 디스패치시키는 규칙을 적용하여 비동기 작업 처리.

18.3.1. redux-thunk

18.3.1.1 Thunk란 ?
- 특정 작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것
18.3.1.2 미들웨어 적용하기

//추가
yarn add redux-thunk

//스토어를 만들때 적용
import ReduxThunk from 'redux-thunk';
const logger = createLogger();

const store = createStore(rootReducer, applyMiddleware(logger, ReduxThunk));

18.3.1.3 Thunk 생성 함수 만들기
18.3.1.4 웹 요청 비동기 작업 처리하기
18.3.1.5 리팩토링

18.3.2 redux-saga

18.3.2.1 제너레이터 함수 이해하기
18.3.2.2 비동기 카운터 만들기

//추가
yarn add redux-saga

//개발자 도구 라이브러리 추가, composWithDevTools를 리덕스 미들웨어와 함께 사용할 때는 applyMiddleware부분을 감싸주면 됨
yarn add redux-devtools-extension

//all 함수는 여러 사가를 합쳐 주는 역할
export function* rootSaga(){
    yield all([counterSaga()]);
}

//사가 미들웨어 등록
import createSagaMiddleWare from 'redux-saga';
import {composeWithDevTools} from 'redux-devtools-extension'; 

const logger = createLogger();
const sagaMiddleware = createSagaMiddleWare();
const store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(logger, ReduxThunk, sagaMiddleware))
);
sagaMiddleware.run(rootSaga);

ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.getElementById('root')
);

18.3.2.3 API 요청 상태 관리하기
18.3.2.4 리팩토링
18.3.2.5 알아 두면 유용한 기능들