리덕스 미들웨어를 사용하면 action이 dispatch된 다음,
reducer에서 해당 action을 받아서 업데이트 하기 전에 💡추가적인 작업을 할 수 있다.
예시
1. 비동기 작업 처리
2. 백엔드 API 연동
3. 특정 조건에 따라 action을 실행하지 않음
4. action을 콘솔에 출력하거나 서버에 로깅할 수 있음
5. action이 dispatch 됐을때 이를 수정하여 reducer에게 전달 할 수 있음
6. 특정 action이 발생했을 때 이에 기반하여 다른 action이 발생하도록 할 수 있음
7. 특정 action이 발생했을때 특정 js Function을 실행시킬 수 있음
함수를 연달아서 2번 리턴하는 함수
const middleware = store=> next=> action => {
// 다음 middleware에게 액션을 전달
// 모든 middleware가 끝나면 reducer -> dispatch(action) 실행
const result= next(action);
// 여기에서 반환하는 result값은 dispatch(action)의 결과물
return result;
}
function middleware(store){
return function(next){
return function(action){
// 작업
}
}
}
💡 각 함수에서 받아오는 파라미터
dispatch()
getState()
subscribe()
내장함수를 포함하고 있다.const store= createStore(rootReducer,applyMiddleware(middleware함수A, middleware함수B...));
createStore의 매개변수로 applyMiddleware()를 입력한다.
applyMiddleware의 매개변수로 middleware를 입력하면 사용할 수 있다.