redux入门 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

middleware

相信用过nodejs的同学都知道中间件的概念,redux也有这个概念

1、中间件如何工作

redux中间件把:
action-->reducer
变成:
action-->middleware1-->middleware2-->……-->reducer

2、如何编写中间件

在redux中中间件也必须是纯函数(前面章节中我们已经介绍了纯函数的概念).
并且我们必须按照严格的格式:

var anyMiddleware = function ({ dispatch, getState }) {
    return function(next) {
        return function (action) {
            // 中间件相关代码
        }
    }
}

我们可以看到中间件由三层嵌套的函数构成:

A、next函数可以将action传递给下一个中间件或者redux

B、第三层的action可以是上一个中间件处理后的action,或者从dispatch传递来的action

我们可以用柯里化来简化我们的中间件,在此不做赘述,推荐去看看Franklin Risby 教授写的 mostly-adequate-guide 一书

3、编写异步中间件

redux有自带的异步中间件叫thunkmiddleware

你会发现其实就是判断参数,如果是普通action,我们就让他直接进入下一步,如果不是就执行异步action函数。

源码:

export default function thunkMiddleware({ dispatch, getState }) {
  return next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState);
    }

    return next(action);
  };
}

我们可以自己编写:

var thunkMiddleware = function({dispatch,getState}){
  return function(next){
    return function(action){
      return typeof action === 'function' ? action(dispatch,getState):next(action);
    }
  }
}

当然我们也可以编写更多中间件,比如说用于打印日志:

var logMiddleware = function({dispatch,getState}){
  return function(next){
    return function(action){
      console.log(new Date()+' action:');
      console.log(action);
      next(action);
    }
  }
}
在代码区中编写异步中间件