[TIL] Redux의 미들웨어

Redux의 미들웨어

미들웨어란?

미들웨어란 리덕스에 원하는 기능을 추가할 수 있게 해주는 함수다.

 

이 함수는 규칙에 따라 리덕스 스토어의 dispatch 함수와 getState 함수가 포함된 객체를 매개변수로 받게 된다.

 

미들웨어를 사용하면 리덕스 스토어에서 액션이 처리될 때 함께 작동하길 원하는 코드를 끼워 넣을 수 있다.

미들웨어 사용법

const initializeStore = () => {
  const store = configureStore({
    reducer: rootReducer,
    middleware: []
  })
  return store
}

 

configureStore 함수의 매개변수는 middleware란 이름의 선택 속성을 가지고 있는데 빈 배열을 설정한 middleware 속성에 미들웨어를 추가하면 된다.

redux-thunk

redux-thunk 패키지는 가장 많이 사용되는 비동기 작업 미들웨어다.

 

리덕스에서 상태값을 변화시키기 위해 thunk 함수를 dispatch하고 사전에 수행해야 할 작업을 처리 후 결과값을 함수 내부에서 다시 dispatch하여 리듀서에게 전달할 수 있다.

 

사용법은 middleware 속성의 배열에 불러온 thunk를 넣으면 된다.