Redux 따라 만들어보기 (6) - 한계점 돌파

 

이전 포스트에서 비동기 처리를할 수 없다는 점이 redux의 한게라 했는데, 

이번 포스트에서 이것을 해결해보고자 한다

 

우선 redux는 action을 dispatch하는 것을 기억하자.

 

reducer가 순수한 함수를 유지하도록 하려면 다른 매개변수 값을 받아서 그것으로 처리해야하는데

이것을 middlewares란 이름의 배열로 하고자 한다

 

기존에 작성했던 createStore를 다음과 같이 수정한다.

 

export function createStore(reducer, middlewares = []) {
  let state;
  const handlers = [];
  //...
    function dispatch(action) {
    state = reducer(state, action);
    handlers.forEach(handler => handler());
  }
  middlewares.forEach(middleware => {
    middleware(action);
  });
  //...
}

 

이전 포스트들에서 aciton이 한 방향으로 흐르는 1-way방식이라고 했는데, 이것을 파이프로 비유해서 그 데이터 흐름 사이에 꽂아 넣어야 한다.

 

dispatch가 실행될 때 action이 넘어온다

즉 dispatch가 실행된다는 것은 redux 바깥쪽에서 action을 호출해서 상태를 바꿀거야 즉 redux를 호출하는 것인데

 

지금 작성된 코드는 Store가 만들어지면서 그냥 호출하고 있는 것이다.

 

먼저 middleware에 대해 알아보자

Store, Dispatch, Action 3개의 인자를 받고 QUERY로 넘겨준다

 

이를 Currying 기법을 사용하여 코드로 구현해보면 

const middleware = store => dispatch => action => {

}
const store = createStore(reducer, [middleware]);

// ....
	middlewares.forEach(middleware => {	
	middleware(store)(dispatch);
	});

 

dispatch안에 action이 들어오는데, 이것을 최종적으로 reducer가 받는다.

reducer 호출을 위해서는 dispatch 함수를 호출해야 한다.

 

파이프라인은 여러개가 되어야 하므로 ..

작성한 middleware의 마지막 인자인 action이 기존 dispatch함수로 대체되어야 한다.

 

이렇게 코드를 작성할 수 있겠죠?

  let lastDispatch = dispatch;

  middlewares.forEach(middleware => {
    lastDispatch = middleware(store)(lastDispatch);
  });
  
  store.dispatch = lastDispatch;

 

middleware도 수정해주어야 한다

const middleware = store => dispatch => action => {
  dispatch(action)
}