리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 한다.
이러한 비동기 작업을 관리해야 한다면, 'Middleware(미들웨어)'를 사용하여 매우 효율적이고 편하게 상태 관리를 할 수 있다.
MiddleWare 가 할 수 있는 작업들
// 디스패치될 될 때마다 액션의 정보와 액션이 디스패치 되기 전 후의 상태를 콘솔에 보여주는 LOGGING MIDDLEWARE
//ARROW FUNCTION
const loggerMiddleWare=store=>next->action=>{
//Middleware
}
//FUNCTIONS
const loggerMiddlWare=function loggerMiddleWare(store){
return function(next){
return function(action){
//Middleware
}
}
}
export default loggerMiddleware
MiddleWare 는 결국에 함수를 반환 하는 반환 함수 이다.
함수의 파라미터로 받아오는 store 는 redux store 내용 , action은 dispatch 되야할 액션들.
next 는 무엇인가?
1. store.dispatch() 같은 역할을 할 때도 있음
2. 그러나 next(action) 일때는 다음 처리해야 할 미들웨어에게 액션을 넘기고, 그 다음 미들웨어가 없다면 리듀서에게 액션을 넘겨 준다고 함.
미들웨어 내부에서 store.dispatch를 하면..
//ARROW FUNCTION
const loggerMiddleWare = (store) => (next) => (action) => {
console.group(action && action.type) //action 타입으로 log를 그룹화함
console.log("이전 상태", store.getState())
console.log("액션", action)
next(action) //다음 미들웨어 혹은 리듀서에게 전달
console.log("다음 상태", store.getState())
console.groupEnd() //그룹 끝
}
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { createStore, applyMiddleware } from "redux"
import { Provider } from "react-redux"
import rootReducer from "../src/modules"
import loggerMiddleWare from "../src/lib/loggerMiddleware"
const store = createStore(rootReducer, applyMiddleware(loggerMiddleWare))
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById("root")
)
오픈 소스 커뮤니티에 이미 올라와있는 redux-logger 를 설치하고 사용해보면 출력하는 형식이 훨씬 깔금하다.
사용법:
1. yarn add redux-logger
2. index.js에 아래 코드 추가
import { createLogger } from "redux-logger"
const logger = createLogger()
const store = createStore(rootReducer, applyMiddleware(logger))
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById("root")
)