[10주차] 4. 리액트 Redux Middleware

리액트

리덕스 미들웨어

• 리덕스가 가지고 있는 핵심 기능
• 리덕스 사용시 미들웨어를 사용하지 않는 다면 context API 등과 다를 것이 없음
• 액션 -> 미들웨어 -> 리듀서 -> 스토어
• 액션 디스패치 될 때 미들웨어에서 특정 조건에 따라 무시할 수 있게 할 수 있다(리듀스에서 해당 액션을 처리하지 않는다는 뜻), 액션이 리듀서에 도달하기 전에 처리할 수 있음(액션 수정하거나 콘솔에 나타나게 함)
• 주로 비동기 작업을 처리 할 때 사용(redux-thunk, redux-saga) ex) API 요청
• 일반적으로 라이브러리로 만들어진 리덕스 미들웨어 사용 ex) redux-thunk, redux-saga, redux-observable, redux-promise-middleware(프로미스 기반 미들웨어) 등
• yarn add redux react-redux

작성법

• 미들웨어는 하나의 함수이다
• middleware 함수(store) -> 함수 반환(next) -> 함수반환(action) -> 액션을 가지고 하고 싶은 작업
• const 미들웨어이름 = store => next => action => { 액션을 가지고 하고 싶은 작업 }
• next : next(action); 미들웨어에서 액션을 받아왔을 때 다음 미들웨어(다음 미들웨어 없으면 리듀서)에게 전달하는 함수, 미들웨어에서 next 호출 안하면 특정 액션을 무시할 수도 있다. do
• 미들웨어는 한 개 이상 사용 가능

적용법

• import { createStore ,applyMiddleware} from ‘redux’
• const store = createStore(rootReducer, applyMiddleware(미들웨어들));

redux-logger

• yarn add redux-logger
• import logger from ‘redux-logger’;
• dev Tools 사용하려면 yarn add redux-devtools-extension 설치 후
  import {composeWithDevTools} from ‘redux-devtools-extension’;
• dev tools 활성화
  : const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(미들웨어들)));

redux-thunk

• 액션 객체가 아닌 함수를 디스패치 할 수 있게 해주는 미들웨어
• 작동 원리
  const thunk = store => next => action =>
  typeof action === ‘function’
  ?action(store.dispatch, store.getState)
  : next(action)
• yarn add redux-thunk
• import ReduxThunk from ‘redux-thunk’\
• logger 사용시 logger를 맨뒤에다가 넣어줘야 함 ex) applyMiddleware(ReduxThunk, logger)

Promise 다루기

• 반복되는 코드 없애기 위해 reducerUtils 함수 작성
• payload 값으로 통일

Tips

• VS code에서 바로 폴더와 함께 파일 만드는 법 : 새파일 생성>이름을 폴더명/파일명.확장자 입력