004 Redux 공부 : Redux Middleware

 

🤔 Redux 미들웨어란?

👉 Redux 애플리케이션에서 액션과 리듀서 사이에서 동작하는 중간 소프트웨어이다.
👉 Redux 미들웨어는 Redux의 동작을 확장하고 액션 디스패치 과정을 가로채서 추가적인 작업을 수행할 수 있다.

 

🤔 Redux 미들웨어를 사용해서 수행할 수 있는 작업??

👉 Redux Thunk 나 Redux Saga와 같은 미들웨어를 사용해서 비동기 작업을 관리할 수 있다.

👉 액션과 상태 변경을 로깅하고 디버깅 정보를 수집할 수 있다.

👉 액션을 가로채서 수정하거나 다른 액션으로 대체할 수 있다.

👉 특정 조건이 충족되었을 때만 액션을 디스패치 할 수 있다.

👉 리액트 라우터와 통합하여 라우팅 관련 작업을 처리할 수 있다.

 

 

👊 Redux 미들웨어 사용해보기

1.  리덕스 미들웨어를 만들 때 사용하는 템플릿 알기

const middleware = store => next => action => {
	// 미들웨어 작업을 수행하는 코드
	// 여기서 action을 가로채고 수정하거나 다른 작업을 수행할 수 있다.
	//다음 미들웨어나 리듀서로 action을 전달한다.
    
    return next(action)
}

 

• store : Redux 스토어의 인스턴스, 미들웨어 함수 내에서 스토어의 상태나 액션에 접근할 때 사용된다.
• next : 다음 미들웨어 또는 리듀서로 액션을 전달하는 함수, 'next(action)'를 호출하여 액션을 다음 미들웨어나 리듀서로 전달한다. 만약 next를 호출하지 않게 된다면 액션이 처리되지 않고 앱의 상태가 업데이트되지 않는다.
• action : 현재 디스패치된 액션 객체, 미들웨어 함수 내에서 이 액션 객체를 가로채고 수정할 수 있다.

 

미들웨어의 작동 구조

 

2. 미들웨어 작성해 보기

단순하게 전달받은 액션을 출력하고 다음으로 넘기는 작업 구현 따라 해보았다.

 

미들웨어를 사용하기 위해서는 Redux스토어를 생성할 때 `applyMiddleware`함수를 사용하고 미들웨어 함수를 전달하면 된다.

const store = createStore(rootReducer, applyMiddleware(myLogger))

액션이 잘 출력된다.

 

액션이 리듀서까지 전달되고 난 후의 새로운 상태를 확인할 수 있도록 수정

"\t"는 탭 문자라고 했는데, 이거 보고 약간 콘솔창 꾸미기도 재밌을 것 같다는 생각이...

쿠팡이나 오늘의 집은 콘솔창 들어가 보면 꾸며놓았다고....

업데이트 이후의 상태를 조회하는 것은 store.getState()인데 나는 두 개의 리듀서 중에서 counter를 사용할 것이기 때문에

store.getState(). counter를 해주었다.

오 출력 잘되는궁

---

이전 글

2023.09.01 - [React] - 001 Redux의 개념

2023.09.11 - [React] - 002 Redux 공부 : Counter

2023.09.12 - [React] - 003 Redux 공부 : To-do List

 

참고

https://ko.redux.js.org/api/applymiddleware

https://react.vlpt.us/redux-middleware/