[React js] redux-middleware01

패스트캠퍼스 리덕스 미들웨어 강의시작

redux-middleware 란?

리덕스 미들웨어란 리덕스 리듀서에게 액션이 전달되기 전,후 에 특정한 액션이 수행되거나 코드가 실행이 되도록 해준다 사용방법 또는 활용도는 무한해서 특정지을 수 없다고한다 Redux 미들웨어는 직접 작성하기 보다는 라이브러리를 많이 사용하며 redux-thunk, redux-saga, redux-promise 등등 다양하다

미들웨어 이해해보기

middlewares 라는 디렉토리에 커스텀 미들웨어를 한개 만들어보자

const Logger = (store) => (next) => (action) => {
  console.log(action);
  console.log(`\tPrev:`, store.getState());
  next(action);
  console.log(`\tNext:`, store.getState());
};

export default Logger;

action 함수를 반환하는->next 함수를 반환하는 ->store 함수를 반환하는
함수라고 한다 이해는 잘 가지 않지만 템플릿 이라고 칭해지는것으로 보면 보통은 이러한 형태를
나타내는듯 하다
action 에는 말그대로 action이 나타나며
next(action) 을 하면 다음 미들웨어 또는 리듀서로(미들웨어가 더이상 없다면) 이동한다.

redux-logger

리덕스 로거라는 미들웨어를 설치해서 사용해보자

npm install redux-logger

스토어생성 인자에 넣어줘서 사용이 가능하다.

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(logger))
);

콘솔창을 열어서 확인해보면 보기좋게 action, prev state, next state가 나타난다

다음 섹션에는 redux-thunk를 실제로 설치해보고 사용해보자