TIL | #21 React | redux-actions, reduxt_logger, redux-thunk, redux-saga, loggerMiddleware, immer

2021-04-12(월)

리덕스를 사용하려면 ActionType, Action, Reducer 3개를 분류하고 나누어서 작업을 해야하는데, 연관성이 있다보니 작업 볼륨이 큰 편이다. 상태관리를 편하게 하기 위해 리덕스를 사용하는데 일이 늘어나는 느낌이다.

그래서 액션관리를 도와주는 redux-acitons 모듈과, 불변성 관리를 도와주는 immer 모듈을 소개하려고한다.

redux-actions module

리덕스의 액션들을 관리하기 위해 유용한 기능들을 제공한다.

immer module

리액트에서 불변성 유지를 도와주는 모듈이다.

loggerMiddleware

리덕스에서 로그를 쉽게 확인할 수 있게 도와주는 라이브러리이다.

// loggerMiddleware.js
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();
};

// store : 리덕스 스토어 인스턴스를 가리킨다.
// action : 디스패치된 액션을 가리킨다.
// next(action)
// 호출하면 그 다음 처리해야 할 미들웨어에게 액션을 넘겨준다.
// 만약에 그 다음 미들웨어가 없으면 리듀서에게 액션을 넘겨준다.

export default loggerMiddleware;

redux-logger module

위에서 소개한 loggerMiddleware 보다 좀 더 전문적인 기능을 제공해주는 모듈이다.

redux-thunk module

비동기 작업을 처리할 때 가장 많이 사용하며, 객체가 아닌 함수형태인 액션을 디스패치 할 수 있게 해준다. thunk란 특정작업을 나중에 할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미한다.

redux-saga module

redux-thunk 다음으로 많이 사용하며, 특정 액션이 디스패치 되었을 때 정해진 로직에 따라 
다른 액션을 디스패치시키는 규칙을 작성하여 비동기 처리한다.

러닝커브가 좀 필요한 redux-saga를 주로 사용하는 경우는 다음과 같다.

1. 기존 요청을 취소 처리해야할 때 (불필요한 중복 방지)
2. 웹 소켓 사용할 때
3. API 요청 실패시 재요청 해야할 때
4. 특정 액션이 발생했을 때 다른 액션을 발생시키거나 API요청 등등 리덕스와 관계없는 코드를 실행할 때 유리하다.