资讯专栏INFORMATION COLUMN

redux源码解析

chanjarster / 650人阅读

摘要:前言的源码是我阅读过的一些库的源码中,相对简单的。在更新完成后,同时会更新,并依次执行监听者列表。使用新的替换现有的,同时执行是随机的字符串。会为注册监听器,监听器存储在数组中,返回的函数则会注销监听器。使用管道,将逐层的进行包装

前言

redux的源码是我阅读过的一些库的源码中,相对简单的。如果大家的感兴趣强烈推荐大家亲自阅读一下。

本文为了方便理解抛开了一些容错处理以及边缘条件的判断

combineReducers

combineReducers是redux中内置的工具函数,目的是将多个reducer函数合并为一个最终的reducer函数。这个最终的reducer函数可以用于createStore中作为参数。

下面两种写法是完全等价的。

combineReducers的实现非常的简单。在A处首先对reducers对象进行遍历,排除value值的类型不是function的value。

B处,我们会遍历经过前一步过滤的reducers对象,依次的执行reducers对象中每一个reducer函数, 将返回的结果存储在新的对象nextState中,最后返回新的对象。

createStore

createStore, 会创建一个Store, 存放应用中全部的state, 形成state树。

另外Store会提供额外的四个方法。getState 获取Store存储的state树;dispatch分发action更改Store中的state;subscribe注册监听器会在dispatch时触发;replaceReducer替换用来计算state的reducer。

createStore, 接收3个参数:

reducer,负责处理action,返回新的state树。

preloadedState,初始的state。如果是通过combineReducers创建reducer,初始的preloadedState的keys必须与reducers对象保持一致。

enhancer,store增强器,enhancer是一个高阶函数,返回值是一个经过包装的强化的store。而redux的applyMiddleware本身就是一个enhancer。

dispatch

dispatch将会用来分发action, 更新currentState对象。在更新完成后,同时会更新currentListeners,并依次执行监听者列表。

getState

replaceReducer

使用新的reducer替换现有的reducer,同时执行dispatch({ type: ActionTypes.REPLACE })(ActionTypes.REPLACE是随机的字符串)。初始化state。

subscribe

subscribe会为dispatch注册监听器,监听器存储在nextListeners数组中,subscribe返回的函数则会注销监听器。

compose

compose并不是redux中的概念,而是函数式编程中概念。类似的方法在ramda等工具库均有实现。

从右往左执行函数组合(右侧函数的输出作为左侧函数的输入)。最右侧函数可以是多参函数,其余函数必须是单参函数。类似a(b(c(arg)))。

middleware

redux的中间件的模型类似与koa。在next前面以及next,由外向里依次执行。当最里层的next执行完成后,next后面的代码,会由内向外依次执行。非常类似koa的洋葱中间件模型。

以下是一个简单的redux中间件的示例。

下面是redux文档中, 为介绍中间件的原理而给出的applyMiddleware的单纯的实现

中间件会对dispatch进行一层包装,并且总是会返回包装后的dispath。下一个中间件,会基于上一个中间件返回的dispatch再次进行处理。

applyMiddleware

在前面我们说过applyMiddleware是redux内置的enhancer。我们先来回顾一下enhancer的使用方法。

在createStore中调用enhancer。参数为createStore自身,enhancer会返回一个新的函数。接收reducer, preloadedState对象作为参数。

在applyMiddleware中,利用js的闭包的特性使用createStore以及reducer, preloadedState参数创建store。

使用管道compose,将store.dispatch逐层的进行包装

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

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

相关文章

  • redux源码解读--applyMiddleware源码解析

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

    Atom 评论0 收藏0
  • 源码解析redux-thunk

    摘要:的返回值是函数,这个函数经调用,传入参数,之后会在中间件链上进行传递,只要保证每个中间件的参数是并且将传递给下一个中间件。 了解了Redux原理之后,我很好奇Redux中间件是怎么运作的,于是选了最常用的redux-thunk进行源码分析。 此次分析用的redux-thunk源码版本是2.2.0,redux源码版本是3.7.2。并且需要了解Redux原理 redux中间件都是由redu...

    simpleapples 评论0 收藏0
  • redux源码解读--compose源码解析

    摘要:源码解析模块的代码十分简练,但是实现的作用却是十分强大。只传递一个参数的时候,就直接把这个函数返回返回组合函数这就是对源码的一个整体解读,水平有限,欢迎拍砖。后续的源码解读和测试例子可以关注源码解读仓库 compose源码解析 compose模块的代码十分简练,但是实现的作用却是十分强大。redux为何称为redux?有人说就是reduce和flux的结合体,而reduce正是comp...

    lk20150415 评论0 收藏0
  • redux源码解读--createStore源码解析

    摘要:源码解析是最核心的模块。比如,当我们需要使用中间件的时候,就会像第三个参数传递一个返回值是一个。后续的源码解读和测试例子可以关注源码解读仓库 createStore源码解析 createStore是redux最核心的模块。这个模块就是用于创建一个store对象,同时,对外暴露出dispatch,getState,subscribe和replaceReducer方法。(源码中关于obse...

    tianren124 评论0 收藏0
  • Redux 源码解析 - Redux 的架构

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

    lylwyy2016 评论0 收藏0

发表评论

0条评论

chanjarster

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<