1. 程式人生 > >redux中介軟體的認識

redux中介軟體的認識

一、redux Thunk中介軟體的認識

主要作用就是讓action建立的函式不會立即執行返回一個action物件,在正常業務開發中,我們可能要在action裡面做些業務處理就可以用的到

  • 1、安裝

    npm install redux-thunk --save
  • 2、專案中導包

    import thunk from 'redux-thunk';
  • 3、與redux結合來使用

    import {createStore, applyMiddleware} from 'redux';
    // 建立一個store
    let store = createStore(count,applyMiddleware(thunk));
  • 4、中介軟體的函式格式(函式裡面進行業務操作,然後要dispatch一個action)

    // 定義一個action  
    const action1 = () => ({
        type: INCREMENT,
    });
    // 一個高階函式(返回的函式裡面的引數是固定的)
    const action4 = () => {
        return (dispatch, getState) => {
            //進行業務操作
            dispatch(action1());
        }
    }

二、常見的中介軟體

  • 1、redux-logger列印日誌中介軟體

    import { applyMiddleware, createStore } from 'redux'
    ; import createLogger from 'redux-logger'; const logger = createLogger(); const store = createStore( reducer, applyMiddleware(logger) );
  • 2、redux-saga中文官網