Redux Middleware

김수민·2023년 1월 27일
0

React

목록 보기
13/17

리덕스 미들웨어를 사용하면 action이 dispatch된 다음,
reducer에서 해당 action을 받아서 업데이트 하기 전에 💡추가적인 작업을 할 수 있다.

추가적인 작업

예시
1. 비동기 작업 처리
2. 백엔드 API 연동
3. 특정 조건에 따라 action을 실행하지 않음
4. action을 콘솔에 출력하거나 서버에 로깅할 수 있음
5. action이 dispatch 됐을때 이를 수정하여 reducer에게 전달 할 수 있음
6. 특정 action이 발생했을 때 이에 기반하여 다른 action이 발생하도록 할 수 있음
7. 특정 action이 발생했을때 특정 js Function을 실행시킬 수 있음

middleware

함수를 연달아서 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){
        	// 작업
        }
    }
}

💡 각 함수에서 받아오는 파라미터

  • store : dispatch() getState() subscribe() 내장함수를 포함하고 있다.
  • next : 액션을 다음 미들웨어에게 전달하는 함수
  • action : 현재 처리하고 있는 액션객체

사용법

const store= createStore(rootReducer,applyMiddleware(middleware함수A, middleware함수B...));

createStore의 매개변수로 applyMiddleware()를 입력한다.
applyMiddleware의 매개변수로 middleware를 입력하면 사용할 수 있다.

profile
sumin0gig

0개의 댓글