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
}
}

最后

以上就是故意香氛为你收集整理的redux异步中间件探索的全部内容，希望文章能够帮你解决redux异步中间件探索所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。