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值。
发表回复