如何使用Thunk 函数实现中间件处理数据

前言

---

因为研究redux源码，所以学习了redux源码使用Thunk 函数实现中间件处理数据，并写了个小demo和理解

demo代码

---

//中间件1
function fun1(dispatch) {
        return function(num) {
            console.log('fun1:---前', num);
            console.log('dispatch--1: ', dispatch);
            dispatch(num);
            console.log('fun1:---后', num);
        }
    }
//中间件2
function fun2(dispatch) {
        return function(num) {
            console.log('fun2:---前', num);
            console.log('dispatch--2: ', dispatch);
            dispatch(num)
            console.log('fun2:---后', num);
        }
    }

function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

var num = compose(fun1,fun2)(function(num) { console.log(num) });

num(456)

运行结果

---

运行结果

个人理解

---

1、 var num = compose(fun1,fun2)(function(num) { console.log(num) });
function(num) { console.log(num) }作为参数传给fun2，然后返回的function作为参数返回给fun1，fun1返回的function赋值给num

2、num(456)
456作为参数传给fun1返回的function，然后fun1 中的dispatch(num);会将456传给fun2返回的function，fun2中的dispatch(num)相当于执行function(num) { console.log(num) }，从而实现fun1，fun2中间件处理数据