Redux Middleware?

액션이 디스패치 되어 리듀서에서 이를 처리하기 전에 사전에 지정된 작업으로 액션과 리듀서 사이의 중간.

동기적인 흐름으로 처리하기 힘든 작업들, 비동기 작업을 처리하기 위해 리덕스 미들웨어를 사용합니다.



redux-logger

발생하는 액션 정보를 콘솔에 출력해 주는 미들웨어. 디스패치된 액션이 어떤 액션인지 확인 후에 콘솔에 로그를 출력하고 액션을 스토어로 전달해 준다.


...

import { createStore, applyMiddleware } from "redux";
import { createLogger } from 'redux-logger';

const logger = createLogger();

const store = createStore(rootReducer, applyMiddleware(logger));

...


redux-thunk

객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있게 해 준다. 특정 액션이 몇초 뒤에 실행되게 하거나 현재 상태에 따라 액션이 아예 무시되게 할 때 사용. 또는 API 호출이 필요할 때. (비동기 작업 처리)


export const fetchData = () => async dispatch => {
    const data = await API.get('./url');

    dispatch({ 
        type: //type,
        payload: data,
    }); 
}


redux-saga

비동기 작업처럼 리듀서에서 처리하면서 안 되는 순수하지 않은 작업들을 처리하기 위한 미들웨어. 데이터 Fetching이나 브라우저 캐시에 접근하는 동작 등을 더 쉽고 좋게 만드는 것이 목적.

redux-thunk로 못하는 다양한 작업들을 처리할 수 있다.


  1. 비동기 작업을 할 때 기존 요청을 취소할 수 있다.
  2. 특정 액션이 발생했을 때 다른 액션이 디스패치되게끔 하거나, JS 코드를 실행할 수 있다.
  3. 웹 소켓을 사용할 때 Channel이라는 기능을 사용하여 더욱 효율적으로 코드를 관리할 수 있다.
  4. API 요청이 실패했을 때 재요청하는 작업을 할 수 있다.