关于redux-saga:redusaga的基本使用及相关原理

49次阅读

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

redux-saga 是什么?

家喻户晓,redux-saga 是一个中间件。所谓的中间件就是给 redux 提供额定性能的,简而言之,也就是对 redux 中的 dispatch,加上一些性能,进行包装。

咱们为什么要应用 redux-saga 呢?

在 redux 中,如果咱们 dispatch 一个 action 之后,会调用 reducer 函数。

 function dispatch(action) {state = reducer(state, action);
    listeners.forEach(l => l());
    return action;
  }

而后 reducer 是一个纯函数,没有副作用,当咱们须要进行异步申请的时候,这个时候 redux 就不够用了,因而咱们须要借助于 redux-saga。

redux-saga 如何进行裁减 redux 的性能呢?

中间件的根本格局

咱们在裁减中间件的时候会应用一个 applyMiddleware 的函数,对原有的 store.dispatch 进行裁减。

function applyMiddleare(...middlewares) {return function (createStore) {return function (reducer, preloadedState) {let store = createStore(reducer, preloadedState);
      let dispatch;
      let middlewareAPI = {
        getState: store.getState,
        dispatch: (action) => dispatch(action),
      };
      let chain = middlewares.map((middleware) => middleware(middlewareAPI));
      dispatch = compose(...chain)(store.dispatch);
      return {
        ...store,
        dispatch,
      };
    };
  };
}
//compose 函数是:function compose(funcs){return funcs.map((a, b) => (...args) => a(b(...args)))
}

由上面这段代码能够看出一个中间件,是承受一个 middleAPI 也就是 store,以及上一次革新后的 dispatch,而后返回一个新的革新后的 dispatch。

 let chain = middlewares.map((middleware) => middleware(middlewareAPI));
 dispatch = compose(...chain)(store.dispatch);

所以一个中间件的格局应该是:

function middleware(store) {return (lastDispatch) => {return (action) => {
      // 进行新的革新
      // 比方 logger 中间件是加上 consolelog 而后 lastDispatch
      // 比方 redux-thunk  是如果 action 是一个函数的话应该如何解决
    };
  };
}

redux-saga 基本原理:

saga 采纳 generator 函数来 yield effect,generator 函数的作用是能够暂停执行,下次再从上次暂停的中央继续执行。

redux-saga 根本根本应用和具体实现:

v redux-saga 中 saga 分类:
  • rootsaga,也就是 saga 的入口
  • 监听 saga,也就是 watchsaga,个别通过 yieldtake 来监听
  • 具体执行的 saga,通过 put fork cps 等等来执行

    // 执行 saga
    function * workerSaga(){yield put({type:actionTypes.ADD});
    }
    // 监听 saga
    function * watcherSaga(){yield take(actionTypes.ADD_SYNC);
    yield workerSaga();}
    // 入口 saga
    export default function* rootSaga() {yield watcherSaga();
    } 

咱们晓得在应用 redux-saga 的时候咱们应用 createSagaMiddleware 来进行创立一个 saga 函数中间件,而后在 saga 函数增加了一个 run 属性,而后在调用了 applyMiddleware 之后执行 saga.run(rootsaga)。saga.run 的时候咱们就把入口 saga 放到了 redux-saga 的逻辑程序外面进行执行了。当初咱们想一下这个过程应该怎么去实现:

首先,createSagaMiddleware 就是创立 saga 的中间件,依照下面我所说的中间件的格局,所以 createSagaMiddleware 应该这样写

function createSagaMiddleware() {function sagaMiddleware({ getState, dispatch}) {return function (lastDispatch) {return function (action) {const result = lastDispatch(action);
        return result;
      }
    }
  }
  return sagaMiddleware;
}

而后须要给 sagaMiddleware 增加 run 函数,在 run 函数中咱们执行了一个 runsaga 的函数。这是一个相似于 co 的库,递归调用 generator 函数,直到 it.next() 返回的 done 值是 false 的时候才会完结。在这期间会对不同的 effect 的 type 进行不同的解决因而实现了 effect 的异步执行。

sagaMiddleware.run= function (...args) {runSaga(...args)}
export default function runSaga(env, saga) {let { channel, dispatch} = env;
    let it = typeof saga === 'function'?saga():saga; // yield fork 的时候间接是执行了一遍 runsaga()// 所以 saga 可能就不是一个 function
    function next(value) {let {value:effect,done} = it.next(value);
        if (!done) {if(typeof effect[Symbol.iterator] === 'function'){// 这种是 yield 前面接了一个 saga 的状况,如 yield watchSaga()
                runSaga(env,effect);
                next();// 不会阻止以后 saga 持续向后走}else if (effect instanceof Promise) {// 如果 yield 了一个 new promise 
                effect.then(next);
            }else{switch (effect.type) {
                    case effectTypes.TAKE:
                      // ...
                    case effectTypes.PUT:
                         // ...
                        break;
                    default:
                        break;
               }
            }

        }
    }
    next();}

通过 effect.type 对不同的类型进行函数的解决。

take: 监听一次

用法:

 yield take(actiontype)

监听一次,而后持续向下执行。

case effectTypes.TAKE:
channel.once(effect.actionType,next);

其中 channel 是一个相似于 node EventEmitter 的公布订阅模型,咱们能够实现一个。

function channel() {let listeners = [];
  function once(type, listener) {
    listener.type = type;
    listener.cancel = function () {listeners = listeners.filter((item) => item !== listener);
    };
    listeners.push(listener);
  }
  function put(action) {for (let i = 0; i < listeners.length; i++) {if (listeners[i].type === action.type) {
        // 只有一次监听
        listeners[i](action);
        listeners[i].cancel();}
    }
  }
  return {
    once,
    put,
  };
}

那咱们什么时候去派发函数让 take 去监听呢?没错就是咱们在 enhance dispatch 的时候进行派发动作的,因而咱们 createSagaMiddleware 返回的 dispatch 中退出派发的动作,进而可能让 take 进行监听。

function createSagaMiddleware() {function sagaMiddleware({ getState, dispatch}) {return function (lastDispatch) {return function (action) {const result = lastDispatch(action);
        channel.put(action);
        return result;
      }
    }
  }
  return sagaMiddleware;
}
fork 不会阻塞的 runsaga

用法:yield fork(saga) // 返回一个 task 对象,对象里有 cancel 属性

case effectTypes.FORK:
   runSaga(env,effect.saga);
      next();

所以就算此时 yield fork 没有执行实现,这个时候也会持续相加执行下一个 yield,因而不会梗塞,这也是和 put 的区别。

takeEvery: 基于 fork 和 take 进行实现。

用法:yield takeEvery(actionType)
原理是每当执行 takeEvery 的时候就会从新开启一个新的过程,新的过程是一个 while true 循环,每个循环都会 take 监听


function takeEvery(type, saga){function *sagaHelper(){while(true){yield take(type)
      yield fork(saga)
    }

  }
  fork(sagaHelper)

}
call 能够调用 promise 函数

用法:yield call(promiseFn)

case effectTypes.CALL:
 effect.fn(...effect.args).then(next);
  break;
cps 回调函数的解决形式

用法:

 yield cps(fn, params1, params2)
function fn(param1, param2, callback){callback(null,data)
}

跟 promise 的区别在于应用了 callback 的解决形式,如果呈现 error 的话,那么 next 执行的时候就 it.throw() 抛出异样。


case effectTypes.CPS:
      if(err){effect.fn(...effect.args,(err,data)=>{ }else{next(err,true);
          next(data);
      }
  });
  break; 
all 都执行实现之后才持续向下执行

用法:yield all ([iterator1,iterator2])

 case effectTypes.ALL:
    const {iterators} = effect;
    let result  =[];
    let count  =  0;
    iterators.forEach((iterator, index) => {runSaga(env, iterator,(data)=> {result[index] =data;
        if(++count===iterators.length){next(result)
        }
      })

总结:

在 redux-saga 中,yield 了一个 effect 之后,会在 effect.js 中转换成相应的 effecttype,而后通过 runsaga 这个函数来进行不同的转换。runsaga 这个函数相似于 co 原理,递归调用 next 函数,终止条件是 it.next() 返回的 done 是 true 值。

正文完
 0