Redux middleware

🖥️ Redux Middleware

Redux는 UI에서 Action이 생기고 Action을 dispatch가 받아 던져주고 reducer로 받아 작업지시를 return 하면 state가 받아주는 원리이다.

 

이렇게 편리하게 사용하는 Redux 에게는 비동기적 처리를 하지 못한다는 단점이 있다.

 

Redux는 동기적 처리를 하기 때문에 만약 A를 바꿔달라고 요청하면 코드가 순차적으로 실행되며 바로 바꿔준다. 그래서 API 요청같은 비동기적 작업이 불가능 하다는 단점이 있다.

 

이 단점을 해결하기 위해 만들어진 것이 Redux middleware이다.

 

Redux middleware는 Redux 원리와 같지만 원래라면 dispatch가 던져주는 Action을 바로 Reducer가 받았지만 Redux middleware를 중간에 거쳐간다.

 

Redux middleware에서 함수를 만들 수 있어 여기서 비동기적 처리르 하게 되고 비동기처리가 끝나면 다시 dispatch로 던져줘 return한 후 state가 받아주는 원리이다.

 

Redux middleware에는 두 가지 종류가 있다. redux-saga, redux-thunk가 있다. 여기서 적용할 것은 redux-thunk를 적용할 것이다.

 

⌨️ Redux middleware(redux-thunk) 설치

먼저 작업하고자 하는 프로젝트에 Redux와 react-redux를 설치한다.

npm install redux react-redux

yarn add redux react-redux

 

그 후 redux-thunk를 설치한다.

npm install redux-thunk

yarn add redux-thunk

 

이후 적용 방법은 2024.02.19 - [👨‍💻 React] - Redux 를 참조하면 된다.

 

위 방법을 적용했다면 store.js 파일에 추가하면 된다.

import {createStore, applyMiddleware} from "redux";
import thunk from 'redux-thunk' //추가
import rootReducer from "./reducers";

let store = createStore(rootReducer, applyMiddleware(thunk));


export default store;