redux3 中间件

redux 中间件

redux中间件书写

• 中间件本身是一个函数，该函数接收一个store参数，表示创建的仓库，该仓库并非一个完整的仓库对象，仅包含getState，dispatch。 该函数运行的时间，是在仓库创建之后运行。
  • 由于创建仓库需要自动运行设置的中间件函数，因此需要在创建仓库时，告诉仓库有哪些中间件
  • 需要调用applyMiddleware函数，将函数的返回结果作为createStore的第二个或第三个参数。
• 中间件函数必须返回一个dispatch创建函数

import { createStore, applyMiddleware } from "redux";


//
function logger1(store) {
    // next 是dispatch
    return function(next) {
        //下面返回的函数是最终要应用的函数
        return function(action){
            console.log("中间件1");
            console.log("旧数据", store.getState());
            console.log("action", action);
            next(action)
            console.log("新数据", store.getState());
        }
    }
}

function logger2() {
    // next 是logger1的dispatch
    return function(next) {
        //下面返回的函数是最终要应用的函数
        return function(action){
            console.log("中间件2");
            console.log("旧数据", store.getState());
            console.log("action", action);
            next(action)
            console.log("新数据", store.getState());
        }
    }
}

//中间件的另一个写法
const logger3 = next =>action =>{
            console.log("中间件2");
            console.log("旧数据", store.getState());
            console.log("action", action);
            next(action)
            console.log("新数据", store.getState());
        }

const store = createStore(reducer, 10, applyMiddleware(logger1, logger2, logger3));

const actionCreators = {
    addUser: createAddUserAction,
    deleteUser: createDeleteUserAction
}

bindActionCreators(actionCreators, store.dispatch)

• applyMiddlewares函数，用于记录有哪些中间件，它会返回一个函数
  • 该函数用于记录创建仓库的方法，然后返回一个函数

// 运用中间件，方式1
const store = createStore(reducer, 10, applyMiddleware(logger1, logger2, logger3)); 

//运用中间件，方式2
applyMiddleware(logger1, logger2, logger3)(createStore)(reducer)

手写applyMiddleware

middleware的本质，是一个调用后可以得到dispatch创建函数的函数

compose: 函数组合，将一个数组中的函数进行组合，形成一个新的函数，该函数调用时，实际上是反向调用之前的函数

/**
 * compose: 函数组合，将一个数组中的函数进行组合，形成一个新的函数，该函数调用时，实际上是反向调用之前的函数
 * @param  {...any} funcs 
 */
export default function compose(...funcs){

    if (funcs.length === 0 ) {
        return args => args; //如果没有组合的函数，则返回原封不动的返回参数
    }
    else if(funcs.length === 1) {
        //要组合的函数只有一个
        return funcs[0]
    }

    
    // return function(...args) {
    //     let lastReturn = null;//记录上一个函数返回的值，它将作为下一个函数的参数
    //     for(let i=funcs.length - 1; i >= 0; i--){
        //         const func = funcs[i]
        //         if(i === funcs.length - 1){//数组最后一项
        //             lastReturn = func(...args)
        //         }
        //         else {
            //             lastReturn = func(lastReturn)
            //         }
            //     }
            //     return lastReturn
            // }

        //以上注释的简化如下
         return funcs.reduce((a,b) => (...args) => a(b(...args)))
        
        }

function func1(n) {
    return n*2
}

function func2(n) {
    return n + n
}

var func = compose(func1,func2)

var result = func(3); //得到12
console.log(result);

applyMiddleware

import compose from './compose'
/**
 * 注册中间件
 * @param  {...any} midleWares 所有的中间件
 */

import { createStore } from "redux"

export default function(...midleWares){
    return function (creaeteStore) { //创建仓库的函数
        //下面的函数用于创建仓库
        return function(reducer, defaultState) {
            //创建仓库
            const store = createStore(reducer, defaultState)
            let dispatch = () => { throw new Error("目前还不能使用dispatch")}

            const simpleStore = {
                getState: store.getState,
                dispatch: store.dispatch
            }

            //给dispatch赋值
            //根据中间件数组，得到一个dispatch创建函数的数据
            const dispatchProducers = midleWares.map(mid => mid(simpleStore))
            dispatch = compose(...dispatchProducers)(store.dispatch)
            return{
                ...store,
                dispatch
            }
        }

    }
}