redux이론5. 미들웨어

목차

1. 미들웨어란?
2. 미들웨어 사용 이유?
3. 미들웨어 종류
4. applyMiddleware() 메서드

 

 

1. 미들웨어란?

• 디스패치 함수를 결합해서 새로운 dispatch 함수를 반환하는 고차함수
• 종종 비동기 action을 일반 action으로 전환함
• 함수 결합을 통해 결합 가능(action logging, routing, 비동기 API 호출 등의 일련의 동기 action으로 전환 용이)

 

2. 미들웨어 사용 이유?

미들웨어는 리덕스와 관련된 로직을 UI layer와 분리시켜 작성 가능케 한다.

이러한 리덕스 관련 로직들은 side effects를 가질 수 있는데, reducers(리듀싱 함수)들은 side effect를 가져서는 안된다.

 

하지만 실제 앱은 이펙트를 가지는 로직이 필요할 수도 있으며,

몇몇 이펙트들은 컴포넌트 내에서, 몇몇 이펙트들은 UI layer의 밖에 존재한다.

 

미들웨어는 이러한 effect들을 작성할 공간이라고 보면된다.

 

 

<참고> thunk?
thunk라는 단어는 프로그래밍 용어로, 작업을 유보시키는 일련의 코드를 의미
즉, 어떤 로직을 지금 당장 실행하기 보다는, 나중에 수행될 작업을 위한 코드나 함수 바디를 작성한다는 뜻


특히 리덕스에서는
'thunks'는 저장소의 dispatch()와 getState() 메서드와 상호작용할 수 있는 함수의 작성 패턴을 의미
thunks를 사용하기 위해서는 저장소의 옵션으로 redux-thunk라는 미들웨어를 추가해야 함



thuks는,
리덕스 앱에서 비동기 로직을 작성하기 위한 기본적인 접근법
data를 가져오기 위해 사용됨
비동기 로직과 동기 로직 둘다를 포함함

 

3. 미들웨어 라이브러리 종류

(1). redux-thunk란

• action 생산자가 디스패치 함수를 통해 제어를 역전할 수 있게 함
• action 생산자는 disapatch를 인자값으로 받아 비동기적으로 호출

 

(2) redux-saga

 

(3) redux-observable

 

(4) redux-promise-middleware

• promise 비동기 액션을 보내고 promise가 결정될 때 action을 보냄

 

 

4. applyMiddleware() 메서드?

• store에 미들웨어 적용 시 사용하는 함수
• dispatch메서드를 감쌀 수 있게 해줌
• 라이브러리에 의존하지 않고 비동기 action 지원

 

applyMiddleware(...middleware)

 

4-1 인자값: 각각의 미들웨어들

• 각각의 미들웨어는 store의 dispatch와 getState 함수를 인자값으로 받아서 함수 반환

 

인자값으로 들어가는 함수는

• 미들웨어 API를 따르는 함수들
• 미들웨어의 dispatch 함수에서 next로 주어짐
• next(action)을 호출하는 action의 함수여야 함

 

체인의 마지막 미들웨어는 

• next
• 저장소의 dispatch를 받아 다음 미들웨어에 전달
• next(action)의 형태로 사용
• 다음 미들웨어가 없으면 reducer에게 action 전달
• 만약 next 호출하지 않게 되면 action은 무시되며 reducer에게 전달되지 않음 > state 변경되지 않음

 

 

next(action) 호출은?

• 다른 인자값과 함께 호출될 수 있음
• 다른 시점에 호출될 수 있음
• 호출되지 않을 수도 있음

 

 

즉, 미들웨어의 시그니처는 아래와 같다.

({ getState, dispatch }) => next => action

 

 

 

• 미들웨어는 저장소의 dispatch()만을 감쌈
• 즉, dispatch() 호출을 직접 감싸서 관리하고, 전체 프로젝트에서 action의 반환을 정의

 

 

 

4-2. 반환

• 주어진 미들웨어를 적용하는 저장소 인핸서