Redux Middleware

리덕스: state관리

리덕스 과정: UI에서 액션이 생기면 액션이 Dispatch로 간다. 그 액션은 Reducer로 가서 작업지시를 받아서 return을 하면 State에 반환이 된다.

Redux의 단점

1. 모든 것을 동기적으로 처리하기 때문에 코드가 순차적으로 진행된다. 그렇기 때문에 비동기 작업은 리덕스로 할 수 없다. 예를 들면 API요청은 서버에 데이터를 요청하고 데이터를 받은 후에 처리해야 한다. 다음 코드를 기다리지 않고 바로 처리하는 것을 비동기 처리라고 한다. 리덕스에서 비동기 처리를 하기 위해 나온 것이 바로 리덕스 미들웨어이다.

리덕스 미들웨어 과정: UI에서 액션이 생기면 액션이 Dispatch로 간다. 그 액션은 Reducer로 바로 가는 것이 아니라 미들웨어에 들려서 미들웨어에서 만드는 함수에서 비동기 처리를 한다. 잠시 action을 holding하고 있다가 준비가끝나면 Reducer에 가서 작업지시를 받아서 return을 하면 State에 반환이 된다.

 

Middleware는 라이브러리가 아니라 컨셉이다. 중간에서 가로채는 느낌. 

 

Middleware의 종류

1. Redux -saga

2. Redux-thunk

(1) 설치

 npm install redux thunk

(2) 적용방법

import {applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
const store = createStore(rootReducer, applymiddleware(thunk))

(3) Redux-thunk의 필요성

Redux는 동기적인 업데이트만 할 수 있지만 Middleware는 비동기적인 업데이트를 할 수 있다.

그 중에서도 thunk는 스토어에 접근하거나 AJAX 요청과 같은 비동기적 logic도 가능하다.

 

(4) Redux-thunk의 배경

Redux-thunk는 함수를 리턴하는 action creaor라는 함수를 만들고 dispatch를 딜레이하는데 쓰인다. 함수 안에는 dispatch와 setState가 매개변수로 들어가게 된다.

const INCREMENT_COUNTER = 'INCREMENT_COUNTER'

function increment() {
  return {
    type: INCREMENT_COUNTER
  }
}
//action creator는 함수를 return한다.
//이 함수는 dispatch와 setState를 매개변수로 갖는다. 
function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment())
    }, 1000)
  }
}