实现一个精简的redux-saga主要包括三个部分,首先是通过createSagaMiddelware创建saga中间件sagaMiddelware,第二是sagaMiddelware中实现一个run函数用于绑定要运行的生成器函数,最后是实现副作用函数。
1、createSagaMiddelware中间件创建函数
在createSagaMiddelware中会返回一个sagaMiddelware中间件,sagaMiddelware中间件会作为输入参数于redux中间件接口绑定,中间件返回一个函数,函数的输入参数是dispatch函数next和action,该函数会先执行next函数然后执行自己的生成器函数。
function createSagaMiddelware() {
function sagaMiddelware({
getState,dispatch}){
//负责把gernerator执行完毕
function run(iterator){
...
}
sagaMiddelware.run = run;
//中间件执行,每次store dispatch的时候都会先来执行返回的函数
//该函数输入action
return (next) => (action) => {
next(action)//先执行中间件中后面的函数
channel.publish(action)//判断是否有take中监听的action要执行
}
}
return sagaMiddelware;
}
export default createSagaMiddelware;
其中channel是用于存储一些中间信息,例如take监测action时会讲action type放到channel中用于帮助监测,如果channel监测到action后会执行生成器的下一个yeild函数,channel函数代码如下:
function createChannel() {
//对象的key为actiontype,value为next函数,
//作用就是收到该actiontype后往下运行
let takers={
};
///将take要监控的actiontype放到channel的takes对象中
function subscribe(actionType,cb) {
takers[action