redux异步中间件探索

redux为什么需要借助中间件来实现异步？

为什么要使用中间件

• 如果没有中间件的运用,redux 通过dispatch 触发action后，直接去reducer执行相应的动作，这个过程只能是同步的。
• 但是在某些比较复杂的业务逻辑中，这种同步的实现方式并不能很好的解决我们的问题。比如我们有一个这样的需求，点击按钮 -> 获取服务器数据 -> 渲染视图，因为获取服务器数据是需要异步实现，所以这时候我就需要引入中间件改变redux同步执行的流程，形成异步流程来实现我们所要的逻辑。
• redux 的工作流程就变成这样 action -> middlewares -> reducer，点击按钮就相当于dispatch 触发action，接下去获取服务器数据 middlewares 的执行，当 middlewares 成功获取到服务器就去触发reducer对应的动作，更新需要渲染视图的数据。
• 中间件的机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。

中间件的核心原理

• 劫持老的dispatch方法，可以在老的dispatch方法之前和之后做一些事情

// ...
const store = createStore(reducer)
const dispatch = srore.dispatch;
// 获取更新前后的状态
store.dispatch = function(action){
	console.log('prev state', store.getState())
	dispatch(action);
	console.log('next state', store.getState() )
}
// 实现延迟1s后派发动作
store.dispatch = function(action){
	setTimeout(() => {
		dispatch(action)
	}, 1000)
}

真正的redux中间件

// getState获取仓库状态
// dispatch 派发动作
function logger({getState, dispatch}){
	return function(next){ // next是原始的dispatch方法
		return function(action){ // action是改造过后的新的dispatch方法
			console.log('prev state', store.getState())
			dispatch(action);
			console.log('next state', store.getState())
		}
	}
}

应用中间件

• applyMiddleware是Redux的一个原生方法，将所有中间件组成一个数组，依次执行。中间件多了可以当做参数依次传进去。

 function applyMiddleware(middlewares) {
  return function (createStore) {
    return function (reducer, preState, enchaner) {
      const middlewaresAPI = {
        getState: store.getState,
        dispatch: (...args) => dispatch(...args),
      };
      const chain = middlewares.map((middleware) => middleware(middlewaresAPI));
      const dispatch = compose(...chain)(store.dispatch);
      return {
        ...store,
        dispatch,
      };
    };
  };
}

使用组合函数将所有的middleware合并成一个middleware，并在最后一个middleware中传入当前的dispatch。

组合函数

const compose = (chain) => {
  if (chain.length === 0) return (arg) => arg;
  if (chain.length === 1) return chain[0];
  return chain.reduce(
    (a, b) =>
      (...arg) =>
        a(b(...arg))
  );
};

常用的异步中间件

redux-saga

redux-thunk 处理异步事件中间件

function cteateThunkMiddleware(args) {
  return ({ dispatch, getState }) =>
    (next) =>
    (action) => {
      if (typeof action === "function") {
        return action(dispatch, getState, args);
      }
      return next(action);
    };
}

redux-saga

redux-saga是一个 redux 的中间件，而中间件的作用是为 redux 提供额外的功能。

在 reducers 中的所有操作都是同步的并且是纯粹的，即 reducer 都是纯函数，纯函数是指一个函数的返回结果只依赖于它的参数，并且在执行过程中不会对外部产生副作用，即给它传什么，就吐出什么。

但是在实际的应用开发中，我们希望做一些异步的（如Ajax请求）且不纯粹的操作（如改变外部的状态），这些在函数式编程范式中被称为“副作用”。

redux-saga 就是用来处理上述副作用（异步任务）的一个中间件。它是一个接收事件，并可能触发新事件的过程管理者，为你的应用管理复杂的流程。

redux-saga工作原理

sages 采用 Generator 函数来 yield Effects（包含指令的文本对象）

Generator 函数的作用是可以暂停执行，再次执行的时候从上次暂停的地方继续执行

Effect 是一个简单的对象，该对象包含了一些给 middleware 解释执行的信息。

你可以通过使用 effects API 如 fork，call，take，put，cancel 等来创建 Effect。

redux-saga分类

worker saga 做实际的工作，如调用API，进行异步请求，获取异步封装结果

watcher saga 监听被dispatch的actions,当接受到action或者知道其被触发时，调用worker执行任务

root saga 立即启动saga的唯一入口

redux-saga中间件核心实现

// 针对不同类型的副作用，执行不同的操作
function sagaMiddleware({getState,dispatch}) {
        function run(generator,callback) {
            let it= typeof generator == 'function'? generator():generator;
            function next(action) {
                let {value:effect,done} = it.next(action);
                if (!done) {
                    if (typeof effect[Symbol.iterator]=='function') {
                        run(effect);
                        next();
                    } else if(effect.then){
                        effect.then(next);
                    }else {
                        switch (effect.type) {
                            case 'TAKE':
                                channel.subscribe(effect.actionType,next);
                                break;
                            case 'PUT':
                                dispatch(effect.action);
                                next();
                                break;
+                            case 'FORK':
+                                let newTask = effect.task();
+                                run(newTask);
+                                next(newTask);
+                                break;
                            case 'CALL':
                                effect.fn(...effect.args).then(next);    
                                break;
                            case 'ALL':
                                let fns=effect.fns;
                                let done=times(next,fns.length);
                                for (let i=0;i<fns.length;i++){
                                    let fn=fns[i];
                                    run(fn,done);
                                }
                                break;    
                            case 'CPS':
                                effect.fn(...effect.args,next);
                                break;
                            case 'CANCEL':
                                effect.task.return('over');    
                                break;
                            default:
                                break;
                        }
                    }
                } else {
                    callback&&callback();
                }
            }
            next();
        }
        sagaMiddleware.run=run;
        return function (next) {
            return function (action) {
                channel.publish(action);
                next(action);
            }
        }
    }

// effects指令
export function take(actionType) {
    return {
        type:'take',
        actionType
    }
}

export function put(action) {
    return {
        type: 'put',
        action
    }
}
export function fork(task) {
    return {
        type: 'FORK',
        task
    }
}
export function* takeEvery(actionType,task) {
    yield fork(function* () {
        while (true) {
            yield take(actionType);
            yield task();
        }
    });
}
export function call(fn,...args) {
    return {
        type: 'CALL',
        fn,
        args
    }
}
export function cps(fn,...args) {
    return {
        type: 'CPS',
        fn,
        args
    }
}
export function all(fns) {
    return {
        type: 'ALL',
        fns
    }
}
export function cancel(task) {
    return {
        type: 'CANCEL',
        task
    }
}