책 한권으로 시작하는 react (16)

ppby·2020년 7월 21일
0

페퍼보이 TIL

목록 보기
17/20
post-thumbnail

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

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

미들웨어

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

미들웨어 만들기

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

  • 일반 함수 형태로 표현

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

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

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

    • ❗️ 큰 차이점 -> next(action) 을 호출하면 그 다음 처리해야 할 미들웨어에게 액션을 넘겨주고, 만약 그 다음 미들웨어가 없다면 리듀서에게 액션을 넘겨 줌
  • 미들웨어 내부에서 store.dispatch를 사용하면 첫 번째 미들웨어 부터 다시 처리
    (미들웨어에서 next 를 사용하지 않으면 액션이 리듀서에게 전달 ❌ -> 액션이 무시됨)

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

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

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

redux-logger 사용하기

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

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

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

0개의 댓글