关于Redux

最新推荐文章于 2024-11-18 20:35:47 发布

转载最新推荐文章于 2024-11-18 20:35:47 发布 · 53 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/TLightSky/p/4723288.html

本文详细解析了Redux中的Middleware部分，特别是Thunk中间件的工作原理。通过对比applyMiddleware，阐述了next函数的作用以及如何利用闭包实现中间件之间的相互调用。重点介绍了如何将中间件绑定getState和dispatch变量，并通过compose函数将所有中间件包装在dispatch外部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

＊将数据和reducer合并在一起生产redux（store）对象

＊提供Provider将redux存到context里，以便随时可以调用store.dispatch

这两天有了更深入的一些了解，redux中最难理解的一部分是middleware部分

例如thunk

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

第一次看的时候，很难理解next的作用，后来结合applyMiddleware进行对比才比较清晰一些：

export default function applyMiddleware(...middlewares) {
  return (next) => (reducer, initialState) => {
    var store = next(reducer, initialState);
    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
    };
  };
}

这里也有next，而next的作用是接收createStore从而进行store的初始化，用于后续的applyMiddleware

比较关键的有两点，一点是

middleware => middleware(middlewareAPI)

将middleware绑定上 getState和dispatch变量

另外一点是使用compose，不断的使用闭包将middleware绑定给下个middleware的next

最终将所有的middleware包裹在store.dispatch外面成为新的dispatch

转载于:https://www.cnblogs.com/TLightSky/p/4723288.html