리덕스 미들웨어는 액션을 디스패치했을 때 리듀서에서 이를 처리하기전에 사전에 지정된 작업을 하는데 액션과 리듀서 사이의 중간에 위치한다

액션 ->미들웨어->리듀서 -> 스토어

미들웨어가 하는작업은 여러가지가있는데 크게

1. 전달받은 액션을 콘솔에 기록
2. 액션정보를 기반으로 액션을 취소하거나, 액션을 추가로 디스패치할수있다

미들웨어 만들기

미들웨어를 만드는일은 별로 많지는 않지만 미들웨어의 작동원리를 이해하기위해 만들어보자

const loggerMiddleware = (store) => (next)=>(action)=>{
    //기본구조
}
 

export default loggerMiddleware;

이구조는 
const loggerMiddleware = function loggerMiddleware(store){
    return function(next){
        return function(action){
            
        }
    }
}
이형태이다
결국 미들웨어는 함수를 반환하는 함수를 반환하는 함수이다^^
여기서 스토어는 리덕스 스토어 이고 action은 디스패치된 액션이다
next 파라미터는 함수형태이며 store.dispatch와 비슷한역할이다
하지만 next는 액션을 호출하면 그다음 처리해야할 미들웨어에게 액션을 넘겨주고, 미들웨어가 없다면 리듀서에게 액션을 넘겨준다는것

1.이전상태
2.액션정보
3.새로워진상태
const loggerMiddleware = (store) => (next)=>(action)=>{
    console.group(action&&action.type)//액션타입으로 log를 그룹화
    console.log('이전상태',store.getState())
    next(action)//다음미들웨어나 리듀서에게 전달
    console.log('다음상태',store.getState())
    console.groupEnd()//그룹끝
}
 

export default loggerMiddleware;

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

//보통 이공간을 스토어로 쓴다

import React from "react";
import ReactDOM from "react-dom";
import { createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import "./index.css";
import App from "./App";
import rootReducer from "./modules";
import loggerMiddleware from "./lib/loggerMiddleware";

const store = createStore(rootReducer, **applyMiddleware(loggerMiddleware))**; //크리에이트 스토를 이용해 root리듀서를 스토어에 넣는다

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

적용되었다..

redux - logger 사용해보기
yarn add redux-logger

import { createLogger } from "redux-logger";

const logger = createLogger();
const store = createStore(rootReducer, applyMiddleware(logger)); //크리에이트 스토를 이용해 root리듀서를 스토어에 넣는다

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

색상도 입혀지고 보기가 좋다^^ 이것이 미들웨어사용이다

비동기작업처리 미들웨어

redux-thunk:가장많이 사용하는 비동기처리 미들웨어 객체가 아닌 함수형태의 액션을 디스패치할수있음

redux-saga: thunk다음으로 많이 사용되는 비동기관련 미들웨어 특정 액션이 디스패치되었을때 정해진 로직에 따라 다른액션을 디스패치시키는 규칙을 작성해 비동기작업을 처리

청크 미들웨어 적용
yarn add redux-thunk

import ReduxThunk from "redux-thunk";

const logger = createLogger();
const store = createStore(rootReducer, applyMiddleware(logger, ReduxThunk)); //크리에이트 스토를 이용해 root리듀서를 스토어에 넣는다

스토어에 적용

모듈에서

export const increaseAsync = () => (dispatch) => {
  setTimeout(() => {
    dispatch(increase());
  }, 1000);
}; 비동기적으로 실행해보기 위해 함수추가

스토어에서

import ReduxThunk from "redux-thunk";

const logger = createLogger();
const store = createStore(rootReducer, applyMiddleware(logger, ReduxThunk)); //크리에이트 스토를 이용해 root리듀서를 스토어에 넣는다
추가

이렇게 하면 아까 만들어놨던 앱에서 1이 카운트에서 1초늦게 올라가거나 1초가 늦게 내려간다

API 비동기적으로 처리해보기