关于redux:函数合成compose的多种实现原理

38次阅读

共计 937 个字符,预计需要花费 3 分钟才能阅读完成。

// 责任链模型(一个接一个执行)

const fn1 = (x, y) => x + y;
const fn2 = (z) => z * z;

// 失常组合

const compose = (fn1, ...other) => (...args) => {let ret = fn1(...args);
  other.forEach(item => {ret = item(ret);
  });
  return ret;
}

// redux 中间件组合形式

const reduxCompose = (...fns) => fns.reduce((a, b) => (...args) => b(a(...args)))

const fn = reduxCompose(fn1, fn2);

console.log(fn(1, 2));

// 洋葱圈模型(一半一半执行)

const koaCompose = (middlewares) => {return function () {return dispatch(0);
    function dispatch(idx) {const fn = middlewares[idx];
      if (!fn) {return Promise.resolve();
      }
      return Promise.resolve(fn(function next() {return dispatch(idx + 1)
        })
      )
    }
  }
};

async function func1(next) {console.log("func1");
  await next();
  console.log("func1 end");
}
async function func2(next) {console.log("func2");
  await delay();
  await next();
  console.log("func2 end");
}
async function func3(next) {console.log("func3");
}
async function delay() {return new Promise((resolve, reject) => {setTimeout(() => {resolve();
    }, 2000);
  })
}
const middlewares = [func1, func2, func3];
const finaFn = koaCompose(middlewares);
finaFn()

正文完
 0