Redux middleware(리덕스 미들웨어)

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

리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업을 실행한다.
예를 들어 전달받은 액션을 단순히 콘솔에 기록, 전달받은 액션 정보를 기반으로 액션을 취소, 다른 종류의 액션을 추가로 디스패치 등

액션 --> 미들웨어1--> next --> 미들웨어2--> next --> 리듀서 --> 스토어

예시

const loggerMiddleware = store => next => action =>{
	// 미들웨어 기본구조
    };
export default loggerMiddleware

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

위의 함수에서 파라미터로 받아오는 store는 리덕스 스토어 인스턴스, action은 디스패치된 액션을 가리킨다.
next 파라미터는 함수 형태로 store.dispatch와 비슷한 역할을 한다. next(action)을 호출할 경우, 그다음 처리해야할 미들웨어에게 액션을 넘겨주고, 만약 미들웨어가 없다면 리듀서에게 액션을 넘겨준다.

2. 종류

1) redux-logger
- 이전상태, 액션, 다음상태 확인가능하다.
2) redux- thunk
- 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어이다. 객체가 아닌 함수의 형태의 액션을 디스패치 할 수 있게 해준다.
3) redux-saga
- 특정 액션이 디스패치 되었을 때 정해진 로직에 따라 다른 액션을 디스패치 시키는 규칙을 작성하여 비동기 작업을 처리할 수 있게 해준다.

3. redux-thunk

Thunk란 특정 작업을 나중에 처리할 수 있도록 미루기 위해 함수 형태로 감싼 것을 의미한다.

const sampleThunk = () = (dispatch, getState) => {
	// 현재 상태를 참조가능, 
    // 새 액션을 디스패치 가능
    }

// 1초 뒤에 increase

export const increaseAsync = () => dispatch => {
	setTimeout(() =>{
    	dispatch(increase());
       }, 1000};
   };