redux中applyMiddleware源码,中文注释

shiweifu 发布于2019-08-26 13:32 / 1922人阅读

摘要：理解需要跟结合首先来看是怎样创建的再来看的源码的第三个参数就是此时会返回也就是在中间件里面去执行了返回的是函数也就是函数然后又跑到里面作为第三个参数所以能把作为参数传进去一个小例子测试返回函数后是什么东西创建一个的方法使用中间件的增强器对于

理解applyMiddleware需要跟createStore结合.首先来看createStore是怎样创建store的.

再来看createStore 的源码

createStore的第三个参数enhancer就是applyMiddleware,此时createStore会返回enhancer(createStore)(reducer, preloadedState),也就是createStore在中间件里面去执行了

applyMiddleware返回的是函数A(也就是applyMiddleware(...middlewares) =函数A,然后又跑到createStore里面作为第三个参数),所以能把createStore作为参数传进去

一个小例子,测试返回函数后是什么东西

import compose from "./compose"

/**
 * Creates a store enhancer that applies middleware to the dispatch method
 * of the Redux store. This is handy for a variety of tasks, such as expressing
 * asynchronous actions in a concise manner, or logging every action payload.
 *
 * 创建一个redux store的dispatch方法使用中间件的store增强器.  对于不同的人任务,这将会
 * 非常方便,比如可以用非常简单的方式进行异步操作,或者输出action的payload
 * 
 * See `redux-thunk` package as an example of the Redux middleware.
 *查看`redux-thunk`包作为一个redux中间件的例子
 *
 * Because middleware is potentially asynchronous, this should be the first
 * store enhancer in the composition chain.
 *
 * 因为中间件默认是异步的,这应该是合成链中的第一个store增强器
 * 
 * Note that each middleware will be given the `dispatch` and `getState` functions
 * as named arguments.
 *注意每个中间件都会以`dispatch` and `getState`方法作为参数
 * @param {...Function} middlewares The middleware chain to be applied.提供的中间件
 * @returns {Function} A store enhancer applying the middleware.store增强器应用的中间件
 */
export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    const store = createStore(reducer, preloadedState, enhancer)
    let dispatch = store.dispatch
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

服务器托管云服务器 redux源码中文注释中文注释说明 python中文注释

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

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

redux源码阅读－－主模块

摘要：主模块的入口模块就是。主要就做两件事引入个功能模块，并挂载至同一个对象上，对外暴露。在非环境下压缩代码，给予警告。后续的源码解读和测试例子可以关注源码解读仓库主模块 redux的入口模块就是src/index.js。这个文件的代码十分简单。主要就做两件事：引入个功能模块，并挂载至同一个对象上，对外暴露。在非production环境下压缩代码，给予警告。下面是模块的源码(只包...

testHs 2019-08-21 17:23 评论0 收藏0
Redux 源码拾遗

摘要：循环还没有结束，其中的某个对进行了添加或者删除，都会影响到此次循环的进行，带来不可预期的错误。首先来一段 redux 结合中间件 thunk、logger 的使用demo 了解一下应该如何使用 const redux = require(redux) const { createStore, combineReducers, bindActionCreators, ...

CloudwiseAPM 2019-08-02 16:11 评论0 收藏0
Redux 源码拾遗

摘要：循环还没有结束，其中的某个对进行了添加或者删除，都会影响到此次循环的进行，带来不可预期的错误。首先来一段 redux 结合中间件 thunk、logger 的使用demo 了解一下应该如何使用 const redux = require(redux) const { createStore, combineReducers, bindActionCreators, ...

zhangfaliang 2019-08-23 16:47 评论0 收藏0
Redux 源码解析 - Redux 的架构

摘要：要应用于生成环境必须要用或者，是的进化产物，优于。我们来看一下他的源码，从而学一些东西。里面都是一个一个的模块，一共个模块，都导出了一些的方法，比如这个号函数，一个匿名函数，然后导出他写的方法。整体架构就是这样的。主要用于压缩的时候。 redux很小的一个框架，是从flux演变过来的，尽管只有775行，但是它的功能很重要。react要应用于生成环境必须要用flux或者redux，red...

lylwyy2016 2019-08-19 18:10 评论0 收藏0