Redux Promise Middleware를 활용한 로딩 바 자동 구현

Redux-Promise-Middleware를 활용한 로딩 바 자동 구현

작성자: 김성빈

작성일: 2018/11/30 PM 2:00~

---

Redux-Promise-Middleware는 Redux 환경에서 Promise가 Middleware로 dispatch된 Action의 payload인 경우 (아래처럼)

dispatch({
  type: 'GET_DOG',
  payload: new Promise(...) // 물론 이렇게 쓰진 않겠죠. 주로 axios.post(...) 등
});

Promise의 상태에 따라 자동으로 이름_PENDING, 이름_FULFILLED, 이름_REJECTED 라는 type과 함께 payload를 dispatch한다.

로딩 바 자동 구현의 원리

react-redux-loading-bar 라이브러리가 Redux-Promise-Middleware 사용 시 자동 수행 기능을 제공하기 때문

바로 실행 가능한 온라인 예제와 소스 코드

https://codesandbox.io/s/kxmy71yrj7