[GitHub]Source Code

1. 작업 환경 준비

$ yarn add redux react-redux redux-actions

2. 미들웨어란?

👀 리덕스 미들웨어

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

👀 미들웨어가 할 수 있는 작업

👣 전달받은 액션 콘솔에 기록
👣 전달받은 액션 정보 기반으로 액션 취소 or 다른 종류의 액션 디스패치

1. 미들웨어 만들기

👀 미들웨어 = 함수를 반환하는 함수를 반환하는 함수

const loggerMiddleware = store => next => action => {
	// 미들웨어 기본 구조
};

👣 store : 리덕스 스토어 인스턴스

👣 action : 디스패치된 액션

👣 next

🟡 파라미터는 함수 형태
🟡 store.dispatch와 비슷한 역할
🟡 next(action) 호출하면 그 다음 처리해야 할 미들웨어에게 액션 넘겨주고, 그 다음 미들웨어가 없다면 리듀서에게 액션 넘겨줌

2. redux-logger 사용하기

$ yarn add redux-logger

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

1. redux-thunk

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

👀 redux-thunk

👣 thunk 함수 만들어 디스패치 할 수 있음
👣 리덕스 미들웨어가 함수 전달받아 store의 dispatch와 getState를 파라미터로 넣어 호출

👀 미들웨어 적용하기

$ yarn add redux-thunk

👣 redux-thunk는 액션 생성 함수에서 일반 액션 객체를 반환하는 대신에 함수 반환

👣 API 호출할 때는 주고 Promise 기반 웹 클라이어트인 axios 사용

$ yarn add axios

👣 각 API 호출하는 함수 따로 작성하면, 나중에 사용할 때 가독성도 좋고 유지 보수도 쉬워짐

👣 리팩토링 : 반복되는 로직을 따로 분리하여 코드의 양을 줄임

2. redux-saga

👀 redux-saga

👣 기존 요청을 취소 처리해야 할 때(불필요한 중복 요청 방지)
👣 특정 액션이 발생했을 때 다른 액션을 발생시키거나, API 요청 등 리덕스와 관계없는 코드를 실행할 때
👣 웹소켓을 사용할 때
👣 API 요청 실패 시 재요청해야 할 때

👀 redux-saga는 ES6의 제너레이터(generator) 함수 문법 사용

👣 함수 작성할 때 함수를 특정 구간에 멈춰 놓을 수도 있고, 원할 때 다시 돌아가게 할 수도 있음
👣 function*
👣 제너레이터 함수 호출했을 때 반환되는 객체를 제너레이터라고 부름
👣 처음 제너레이터 만들어지면 함수 흐름은 멈춰있음
👣 next() 호출되면 다음 yield가 있는 곳까지 호출하고 다시 함수 멈춤
👣 next 함수에 파라미터를 넣으면 제너레이터 함수에서 yield를 사용하여 해당 값을 조회할 수도 있음

👣 redux-saga

디스패치하는 액션을 모니터링해서 그에 따라 피요한 작업을 따로 수행할 수 있는 미들웨어

👣 비동기 카운터 만들기

$ yarn add redux-saga

👣 API 호출해야 하는 상황에서는 사가 내부에서 직접 호출하지 않고 call 함수 사용

👣 select

사가 내부에서 현재 상태를 참조해야 하는 상황이 생기면 사용

👣 throttle

사가가 n초에 단 한 번만 호출