redux源码剖析

《redux源码剖析》

《redux源码剖析》

媒介

redux的源码是我浏览过的一些库的源码中,相对简朴的。假如人人的感兴趣强烈推荐人人亲身浏览一下。

本文为了轻易明白抛开了一些容错处置惩罚以及边沿前提的推断

combineReducers

combineReducers是redux中内置的东西函数,目标是将多个reducer函数合并为一个终究的reducer函数。这个终究的reducer函数能够用于createStore中作为参数。

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

《redux源码剖析》

combineReducers的完成异常的简朴。在A处起首对reducers对象举行遍历,消除value值的范例不是function的value。

B处,我们会遍历经由前一步过滤的reducers对象,顺次的实行reducers对象中每个reducer函数, 将返回的效果存储在新的对象nextState中,末了返回新的对象。

《redux源码剖析》

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。

《redux源码剖析》

dispatch

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

《redux源码剖析》

getState

《redux源码剖析》

replaceReducer

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

《redux源码剖析》

subscribe

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

《redux源码剖析》

compose

compose并非redux中的观点,而是函数式编程中观点。相似的要领在ramda等东西库均有完成。

从右往左实行函数组合(右边函数的输出作为左边函数的输入)。最右边函数能够是多参函数,其他函数必需是单参函数。相似a(b(c(arg)))。

《redux源码剖析》

middleware

redux的中间件的模子相似与koa。在next前面以及next,由外向里顺次实行。当最里层的next实行完成后,next背面的代码,会由内向外顺次实行。异常相似koa的洋葱中间件模子。

《redux源码剖析》

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

《redux源码剖析》

下面是redux文档中, 为引见中间件的道理而给出的applyMiddleware的纯真的完成

《redux源码剖析》

中间件会对dispatch举行一层包装,而且总是会返回包装后的dispath。下一个中间件,会基于上一个中间件返回的dispatch再次举行处置惩罚。

applyMiddleware

在前面我们说过applyMiddleware是redux内置的enhancer。我们先来回忆一下enhancer的运用要领。

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

《redux源码剖析》

在applyMiddleware中,应用js的闭包的特征运用createStore以及reducer, preloadedState参数建立store。

运用管道compose,将store.dispatch逐层的举行包装📦,返回的dispath会掩盖store中dispatch。

《redux源码剖析》

bindActionCreators

bindActionCreators在日常平凡工作中出镜率很少,bindActionCreators重要用途是将dispatch要领包装到action creator中。bindActionCreators的源码很简朴。下面是详细完成。

《redux源码剖析》

    原文作者:张越
    原文地址: https://segmentfault.com/a/1190000019425040
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞