[React] 리덕스에서 미들웨어 청크의 역할은 뭘까요?

✍️ 리덕스에서 미들웨어 청크의 역할은 뭘까요?

리덕스의 네가지 구성 요소

• 뷰에서 상태값을 변경시키고 싶을 때 액션을 발생시킨다.
  뷰에서 dispatch를 호출하여, 리덕스에게 액션이 발생함을 알리게 된다.
• 액션을 발생시키면, 그 액션을 미들웨어가 처리한다.
  미들웨어는 옵셔널이다. 기능을 넣었다면 미들웨어가 중간에 처리를하고 미들웨어가 없다면, 액션은 바로 리듀서로 넘어간다.
• 리듀서에서는 해당 액션에 의해서(액션 타입) 상태를 어떻게 변경할지 로직이 담겨져 있다. 그 로직에 맞게 새로운 상태값을 반환한다.
• 새로운 상태값은 스토어에게 도달하게되고, 스토어는 새로운 상태값을 저장한다.
• 스토어를 바라보고 있는 옵저버들이 있는데, 옵저버들은 데이터의 변경 사실을 알게된다. 주로 "뷰"가 옵저버가 되는데, 뷰는 데이터가 변경 되었다는 사실을 알면 화면을 갱신한다.

 

👊 미들웨어

미들웨어는 액션이 디스패치 된 다음 리듀서에서 액션을 처리하기 전에 액션을 받아와서 액션을 취소시키거나 다른 종류의 액션을 추가적으로 디스패치하는등 업데이트 이전에 추가적인 작업을 할 수 있도록 도와주는 역할이다.

즉, 리듀서 내의 어떤 로직이 실행되기 사이의 중간다리 역할을 해줄 함수들을 작성하는 공간이다.

thunk를 사용하면 우리가 dispatch를 할때 객체가 아닌 함수를 dispatch 할 수 있게 해준다.
즉 dispatch(객체) 가 아니라 dispatch(함수)를 할 수 있게 되는 것
그래서 중간에 우리가 하고자 하는 작업을 함수를 통해 넣을 수 있고,
그것이 중간에 실행이 되는 것이다.
그래서 아래 흐름과 같이 실행이 되며 이 함수를 thunk 함수라고 부른다.
dispatch(함수) → 함수실행 → 함수안에서 dispatch(객체)보통
우리가 리덕스 미들웨어를 사용하는 이유는 서버와의 통신을 위해서 사용하는 것이 대부분이다.

출처