리덕스 미들웨어를 통한 비동기 작업관리 👀

• 리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 한다.
  1. 요청이 시작되었을 때는 로딩주...
  2. 요청이 성공하거나 실패 했을 때는 로딩이 끝났음...
     • 요청 성공 -> 서버에서 받아온 응답에 대한 상태 관리
     • 요청 실패 -> 서버에서 반환한 에러에 대한 상태 관리
• 미들웨어를 사용하여 매우 효율적이고 편하게 상태관리를 할 수 있다.

---

미들웨어

• 리덕스 미들웨어는 액션을 디스패치 했을 때 리듀서에서 이를 처리하기에 앞서 사전에 작업들을 실행

미들웨어 만들기

• 함수를 반환하는 함수를 반환하는 함수...?🤬🤬

• 일반 함수 형태로 표현
  

• store
  : 리덕스 스토어의 인스턴스

• action
  : 디스패치된 액션을 가리킴

• next
  : (함수 형태), store.dispatch 와 비슷한 역할

  • ❗️ 큰 차이점 -> next(action) 을 호출하면 그 다음 처리해야 할 미들웨어에게 액션을 넘겨주고, 만약 그 다음 미들웨어가 없다면 리듀서에게 액션을 넘겨 줌

• 미들웨어 내부에서 store.dispatch를 사용하면 첫 번째 미들웨어 부터 다시 처리
  (미들웨어에서 next 를 사용하지 않으면 액션이 리듀서에게 전달 ❌ -> 액션이 무시됨)
  

• 미들웨어는 스토어를 생성하는 과정에서 적용

• 리덕스 미들웨어는 여러 종류의 작업을 처리할 수 있다.

  • 특정 조건에 따라 액션 무시
  • 특정 조건에 따라 액션 정보를 가로채서 변경한 후 리듀서에게 전달
  • 특정 액션에 기반하여 새로운 액션을 여러번 디스패치할 수 있다

redux-logger 사용하기

• 기존 미들웨어 자리에 대신 넣는다.

---

비동기 작업을 처리하는 미들웨어 사용

• redux-thunk
  : 비동기 작업을 처리할 때 가장 많이 사용하는 미들웨어, 객체가 아닌 함수 형태의 액션을 디스패치할 수 있게 해준다.
• redux-saga
  : redux-thunk 다음으로 가장 많이 사용되는 비동기 작업 관련 미들웨어 라이브러리, 특정 액션이 디스패치 되었을 때 정해진 로직에 따라 다른 액션을 디스패치 시키는 규칙을 작성하여 비동기 작업을 처리할 수 있게 해준다.