본문 바로가기
Frontend

14. Redux-middleware

by yongmin.Lee 2020. 11. 6.

- 리액트 웹 애플리케이션에서는 API 요청에 대한 상태도 잘 관리해야 한다

- 리액트 웹 애플리케이션에서 리덕스를 사용하고 있으며 api 요청과 같은 비동기 작업을 관리해야 한다면 middleware를 사용하여 효율적으로 상태를 관리할 수 있다

middleware란?

- 리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기에 앞서 사전에 지정된 작업들 실행하는 액션과 리듀서 사이의 중간자

- 미들웨어가 하는 작업 예시 1 : 전달받은 액션을 콘솔에 기록

- 미들웨어가 하는 작업 예시 2 : 전달받은 액션을 취소하거나 다른 종류의 액션을 추가로 디스패치

- 대표적인 미들웨어 : redux-thunk, redux-saga

redux-thunk

- 비동기 작업을 처리할 때 많이 사용하는 미들웨어, 객체가 아닌 함수 형태의 액션을 디스패치할 수 있게 해준다

- thunk : 특정 작업을 나중에 할 수 있도록 미루기 위해 함수형태로 감싼 것

- thunk함수를 만들어 내부에서 디스패치하면,  redux-thunk미들웨어가 thunk함수를 받아 store의 dispatch와 getState를 파라미터로 넣어서 호출

redux-saga

- 특정 액션이 디스패치되었을 때 정해진 로직에 따라 다른 액션을 디스패치 시키는 규칙을 작성하여 비동기작업을 처리할 수 있게 해준다.

- ES6의 제너레이터함수 문법을 기반으로 비동기 작업을 관리 -> 디스패치하는 액션을 모니터링해서 그에 따라 필요한 작업을 따로 수행할 수 있다.

'Frontend' 카테고리의 다른 글

JS 실행 컨텍스트  (0) 2020.11.07
JS 데이터 타입  (0) 2020.11.07
13. React-Redux  (0) 2020.11.06
12. Redux  (0) 2020.11.06
11. Asynchrony (비동기작업)  (0) 2020.10.25