redux applyMiddleware

TOC

1. middleware란 무엇인가.

2. 작동방식

1. middleware란 무엇인가.

기존의 redux의 작동방식은

store의 값을 변화하시키는데 이러한 과정을 거쳤다.

1. dispatch로 action값을 reducer에 넘긴다.

store.dispatch(logIn({action:action}))

2. reducer는 값을 받아 store에 넘기고 store는 reduce한 값을 반환해 initialState는 보존하고 새로운 객체를 반환해준다.

값의 immutable을 지키면서 새로운 값을 내주어 state를 관리한다는 것은 좋다.

하지만 여기에 비동기가 끼어들 틈이 있는가? redux의 값 변경은 바로 적용이 되기 때문에 끼어들 틈이 없다.
그래서 midlleware가 등장하게 된다.

redux-middleware
공식 홈페이지에서는 몽키패칭을 고치면서 console을 찍어내는 과정을 설명한다.

이를 요약하면 대강 이런 말이다.

• store에 값을 넣고 새로운 값을 받는 것은 멋진 일이다. 하지만 대입되는 값을 먼저 찍어보고 변화된 값을 다시 받는 함수가 있으면 개발에 편리할 것이다.

• (몽키패칭한 코드를 보여주며)이러한 코드는 동작하지만 효율적이지 못하다. (멋지게 고쳐진 코드를 보여주며) 이런식으로 만들어진게 middleware이다.

핵심은 store에 dispatch(action)이 전달되기 이전의 이벤트와 store를 거쳐 나온 후의 이벤트에 어떠한 특정 행동을 할 수 있게 해주는게 middleware이다.

2. 작동방식

const { createStore, applyMiddleware } = require('redux');
 			...
const firstMiddleWare = (store) => (dispatch) => (action) => {
  console.log('middle ware: ', action);
  dispatch(action);
};
			...
            

const enhancer = applyMiddleware(firstMiddleWare)
const store = createStore(reducer, initialState, enhancer);

1. redux에서 applyMiddleware require해준다.

2. createStore의 세번째 인자로 middleware 함수를 넣어준다.

3. middleware자리에 들어간 함수는 실제 store의 작동이다.
   예를 들어 middleware에

dispatch(action)

을 해주지 않으면 실제로 dispatch를 하지 않는다. 다른 위치에서 dispatch를 한다고 하더라도 말이다.
그저 console만 찍어주는 함수가 아닌 실제 작동방식을 변경시킨다.

잠깐 삼차함수의 설명

const firstMiddleWare = (store) => (dispatch) => (action) => {
  console.log('before middle ware: ', action);
  dispatch(action);
  console.log('after middle ware: ', action);
};

삼차함수는 함수 내부에 함수가 있고 안쪽 함수에 하나의 함수가 더 있는 것이다.

function (){
  console.log('outside') // 여기서 할 일을 정하는것이 middleware
	function (){
      					// 여기서 할 일을 정하는것이 middleware
      console.log('middle')
    	function (){
          console.log('inner')
        }
    }
}

가장 먼저 들어갈 인자부터 생각하면 좀 편해진다
action은 action함수의 인자인 실제 데이터 객체를 말한다.

store.dispatch(
  logIn({ // { <-여기부터
    sns: 'NAVER', //
    userName: 'hahahoho',
  }) // } <-까지
);