Redux中间件的原理

let store = {
  dispatch(action) {
    console.log(action);
  }
}

let fn1 = function (store) {
  return function (next) {
    console.log("fn1 next start")
    return function (action) {
      console.log("fn1 start")
      let result = next(action)
      console.log("fn1 end")
      return result;
    }
  }
}

let fn2 = function (store) {
  return function (next) {
    console.log("fn2 next start")
    return function (action) {
      console.log("fn2 start")
      let result = next(action)
      console.log("fn2 end")
      return result;
    }
  }
}
let fn3 = function (store) {
  return function (next) {
    console.log("fn3 next start")
    return function (action) {
      console.log("fn3 start")
      let result = next(action)
      console.log("fn3 end")
      return result;
    }
  }
}

let arrs = [fn1, fn2, fn3];

function applymid(store, arrs){

  let dispatch = store.dispatch;
  arrs.forEach(element => {
    dispatch= element(store)(dispatch)
  });
  return Object.assign({},store,{dispatch});

}


// 循环过程中 第一次执行element(store)(dispatch);得到的结果是
dispatch1 = function (action) {
  console.log("fn1 start")
  let result = next(action)   //此处next为原始最初的dispatch
  console.log("fn1 end")
  return result;
}
// 循环第二次执行element(store)(dispatch);得到的结果是：

dispatch2 = function (action) {
  console.log("fn2 start")
  let result = next(action) //此处next为原始最初的dispatch1
  console.log("fn2 end")
  return result;
}

// 此时的next就是上一次的dispatch 即dispatch1代入得到：

dispatch = function (action) {
  console.log("fn2 start")
  let result = (function (action) {
    console.log("fn1 start")
    let result = next(action)   //此处next为原始最初的dispatch
    console.log("fn1 end")
    return result;
  })(action);
  console.log("fn2 end")
  return result;
}

// 简化：

dispatch = function (action) {
  console.log("fn2 start")
  console.log("fn1 start")
  let result = next(action)   //此处next为原始最初的dispatch
  console.log("fn1 end")
  console.log("fn2 end")

}

let s = applymid(store,arrs);

s.dispatch(999);