关于 Redux 中间件

Ryan_Li 发布于2019-08-20 13:50 / 1615人阅读

摘要：的中间件是定义一个函数，对进行改造，在发出与执行之间添加其他功能。

Redux 的中间件是定义一个函数，对 dispatch 进行改造，在发出 action 与执行 reducer 之间添加其他功能。这是对 Redux 进行功能拓展的方式。

Redux 如何支持中间件？

applyMiddlewares()

</>复制代码 
export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer);
    var dispatch = store.dispatch;
    var chain = [];
    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    };
    chain = middlewares.map(middleware => middleware(middlewareAPI));
    dispatch = compose(...chain)(store.dispatch);
    return {...store, dispatch}
  }
}

middleware => middleware(middlewareAPI)

每个 middleware 将能访问 getState 与 dispatch，同时可以知道该 middleware 为高阶函数，执行返回一个函数

compose()

dispatch = compose(...chain)(store.dispatch);

</>复制代码 
export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }
  if (funcs.length === 1) {
    return funcs[0]
  }
  const last = funcs[funcs.length - 1]
  const rest = funcs.slice(0, -1)
  return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
}

(composed, f) => f(composed)
即:
middleware({getState, dispatch})(store.dispatch)
该函数为高阶函数，执行返回一个函数

分析至此，一个 middleware 函数大致为：

</>复制代码 
（{getState, dispatch}）=> (next) => (action) => {
    // next 即 store.dispatch
    //...在此拓展功能
    action() // action, 这个action执行触发dispath??
 }

Action 如何与Dispatch联系起来？

action 通过 bindActionCreator 与 dispatch 联系起来

bindActionCreator()

</>复制代码 
function bindActionCreator(actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args))
}

(...args) => dispatch(actionCreator(...args))

由 actionCreator 可以知道 actionCreator 为高阶函数，执行返回一个函数

所以一个 action 的姿势应该为：

</>复制代码 
()=> () => {
   type: "",
   payload
}

举例：redux-thunk 中间件

源码：

</>复制代码 
function thunkMiddleware({ dispatch, getState }) {
  return next => action =>
    typeof action === "function" ?
      action(dispatch, getState) :
      next(action);
}

action 怎么写？

</>复制代码 
funciton fetchSomething(){
    return (dispatch, getState)=>{
        fetch().then((res)=>{  
            disatch({
                type: "FETCH_SOMETHING_DONE"
                palyload
            })
        })
    }
}

参考：

Redux Middleware Doc

GPU云服务器云服务器 Redux redux源码 redux-saga react-redux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81266.html

Redux story-1:who creates it?

摘要：而不是卷入无休止的撕逼，用了某某而产生的优越，甚至借贬低他人来抬高自己。前言这是一个系列文章，旨在分享在react及相关技术栈实践过程中的个人感悟，心得。如果有不好的地方，欢迎各位批评指正。由于对react本身还未深入了解，今天我们先来谈一谈redux相关的问题。 Who creates it? Dan Abramov是redux的作者，同时，他也是Create React...

lavor 2019-08-20 13:52 评论0 收藏0
React Redux 中间件思想遇见 Web Worker 的灵感（附demo）

摘要：写在最前原文首发于作者的知乎专栏中间件思想遇见的灵感附，感兴趣的同学可以知乎关注，进行交流。其中，最重要的一个便是对多线程的支持。在中提出了工作线程的概念，并且规范出的三大主要特征能够长时间运行响应理想的启动性能以及理想的内存消耗。写在最前原文首发于作者的知乎专栏：React Redux 中间件思想遇见 Web Worker 的灵感（附demo），感兴趣的同学可以知乎关注，进行交流...

whatsns 2019-08-22 10:53 评论0 收藏0
redux源码解读--applyMiddleware源码解析

摘要：的中间件主要是通过模块实现的。返回的也是一个对象这个其实就是，各个中间件的最底层第三层的哪个函数组成的圆环函数构成的这就是对源码的一个整体解读，水平有限，欢迎拍砖。后续的源码解读和测试例子可以关注源码解读仓库 applyMiddleware源码解析中间件机制在redux中是强大且便捷的，利用redux的中间件我们能够实现日志记录，异步调用等多种十分实用的功能。redux的中间件主要是...

Atom 2019-08-22 13:35 评论0 收藏0
React 项目中Redux 中间件的理解

摘要：如果想学习项目的底层建设，建议先去学习官网案例，之后在学习的使用中间件介绍目的是提供第三方插件的模式，改变的过程。前言 React/Redux项目结束后，当我在研究react-router源码的时候发现当中有一部分含中间件的思想，所以才想把中间件重新梳理一遍；在之前看redux了解到中间件，redux层面中间件的理解对项目前期比较有帮助，虽然项目中后期基本可以忽略这层概念；现在对这部...

amc 2019-08-21 11:18 评论0 收藏0
Redux:Middleware你咋就这么难

摘要：接下来的函数就有点难度了，让我们一行一行来看。上面实际的含义就是将数组每一个执行的返回值保存的数组中。需要注意的是，方法返回值并不是数组，而是形如初始值的经过叠加处理后的操作。从而实现异步的。　　这段时间都在学习Redux，感觉对我来说初学难度很大，中文官方文档读了好多遍才大概有点入门的感觉，小小地总结一下,首先可以看一下Redux的基本流程:showImg(https://segm...

superPershing 2019-08-20 14:15 评论0 收藏0