redux (middleware) 2

Posted on Edited on In ,

redux middleware의 템플릿

리덕스 미들웨어를 만들 땐 다음 템플릿을 사용하는 것을 원칙으로 한다고 한다

1
2
3
const middleware = store => next => action => {
  // 하고 싶은 작업...
}

위와 같은 방식을 커링 기법이라는 것을 이번에 배웠다.
[커링 기법]:https://ko.javascript.info/currying-partials

그냥 코드적으로 생각하면 밑의 내용과 같다

1
2
3
4
5
6
7
function middleware(store) {
  return function (next) {
    return function (action) {
      // 하고 싶은 작업...
    };
  };
};

결국 고차함수 방식으로 매개변수를 store 로 주고 리턴값을 함수로 주어서 그 함수가 다시 action을 매개변수로 받는 형식으로 진행된다.

첫번째 store는 redux에서 항상 사용하는 데이터 저장장치이다. 이 안에 dispatch, getState, subscribe 내장함수들을 통해서 실행 구독 스테이트의 상태를 가져오는 것이 가능하다. 그렇다면 이 방식은 왜 사용하는가?

middleware를 사용하는 이유

간단히 생각하면 redux의 문제가 있기 때문이다. 다시 한번 redux 로 돌아가서 생각해보자

1
2
3
4
5
6
7
8
9
10
11
12
13
function reducer(state = InitializeState , action) {
  // do something
  switch(action.type) {
    case ActionType.INCREASE:
      return { ...state, count: state.count + 1 };
    case ActionType.DECREASE:
      return { ...state, count: state.count - 1 };
    case ActionType.RESET:
      return { ...state, count: 0 };
    default: 
      return { ...state };
  }
}

일반적인 reducer 함수이다. 이와 같은 함수를 redux에서는 매개변수로 받기에 값을 받지 않으면 undefined 가 나와 버린다. 예를 들어 ActionType.INCREASE: return { …state, count: state.count + 1 }; 이 아니고 setTimeout과 같은 함수를 리턴 해버리면 결국 값은 나오지 않는다. 순수함수이기 때문이다. 그렇기에 middleware를 reducer와 같이 받아서
createStore 와 같은 기초적인 redux 함수로 처리하는 것이 필요하다.