アクション->ミドルウェア->リカバリ->ショップ

ミドルウェアの作成

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")
);

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:最も一般的な非同期処理ミドルウェアオブジェクトではなくdispatch関数形式の動作が可能

redux-saga: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리듀서를 스토어에 넣는다
추가

API非同期処理の試行