[React] Redux 미들웨어

👾 미들웨어란 ? ( 함수를 반환하는 함수다 ... )

리덕스 미들웨어는 액션을 디스패치했을 때, 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행합니다 !

미들웨어

정확히는 액션이 디스패치(dispatch)되어 스토어에 도달하기 전, 후에 추가적인 작업을 수행합니다!

• 전달받은 액션을 콘솔에 기록
• 액션의 처리 과정을 중간에 변경하거나 아예 취소
• 다른 종류의 액션을 추가로 디스패치 등...

 

미들웨어를 만들어 보며 확실하게 이해해 봅시다 . ̫ .

액션이 디스패치될 때마다 액션의 정보와 액션이 디스패치 되기 전, 후의 상태를 콘솔에 보여 주는 로깅 미들웨어를 작성해볼게요

const loggerMiddleware = store => next => action => {
    console.group(action && action.type); //액션 타입으로 log를 그룹화
    console.log('이전 상태', store.getState());
    console.log('액션', action);
    next(action); // 다음 미들웨어 or 리듀서에게 전달
    console.log('다음 상태', store.getState()); // 업데이트된 상태
    console.groupEnd(); // 그룹 끝
}

export default loggerMiddleware;

저는 구조가 좀 특이하다고 생각을 했고, 동시에 왜 이렇게 작성하는지 의문도 들었습니다.

여기서는 함수를 여러 개의 인자를 받는 대신, 인자를 받는 함수들을 연속해서 호출하는 방법으로 사용하고 있습니다.

1. 'loggerMiddleware' : Redux 미들웨어 함수 전체를 가리키는 함수
2. 'store' Redux 스토어 객체를 받아옴
3. 'next' : 현재 미들웨어에서 다음으로 처리해야 할 미들웨어를 가리키는 함수
4. 'action' : 디스패치된 액션 객체

위 코드를 풀어서 작성하면

const loggerMiddleware = function loggerMiddleware(store) {
    return function(next){
        return function(action){
            // 미들웨어의 기본 구조
        };
    };
};

이런 구조입니다!

 

 

미들웨어 체이닝

const middleware1 = store => next => action => {
    // 미들웨어 1 로직
    next(action);
};

const middleware2 = store => next => action => {
    // 미들웨어 2 로직
    next(action);
};

// 미들웨어 체이닝
const chain = middleware1(store)(middleware2(store)(action => {}));

단일 미들웨어 함수 middleware1, middleware2를  가지고 미들웨어 체이닝을 하고 있습니다!

middleware1을 실행하고 middleware2를 연속해 실행하는 방식으로 미들웨어 체이닝을 수행하고, 마지막에 빈 함수 
action => {} 를 인자로 받으며 끝냅니다.

 

 

next() 함수는 아직 한 번도 사용해보지 않았는데, next(action)을 호출하면 그 다음 처리할 미들웨어에게 액션을 넘겨주고 ,
만약 다음 미들웨어가 없다면 리듀서에게 액션을 넘겨주는 방식으로 구동하는 함수입니다!

 

 

미들웨어에서 next를 사용하지 않으면 액션이 리듀서에 전달되지 않습니다!

 

 

미들웨어를 사용하면 비동기 작업을 처리하는것이 유용한 이유에 대해 더 찾아보았습니다

1. 액션의 중간 가로채기
   액션이 디스패치 되기 전에 액션을 가로챌 수 있기 때문에 비동기 작업을 트리거하거나 특정 조건에 따른 액션을 처리할 수 있음
2. 액션의 조합
   여러 개의 액션이 순차적, 병렬로 발생해야 하는 경우 미들웨어를 사용하여 여러 액션을 조합하거나 순차적으로 실행 할 수 있음

 

일반적으로 미들웨어는 남이 만들어 놓은 코드를 사용하기 때문에.. ㅎㅎ(또는 조금 변경하거나) 
Redux Thunjk, Redux Saga 등의 미들웨어를 사용해서 한 번 실습 해봐야겠습니다!