redux源码解析

goldenwolf 发布于8月前
0 条问题

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 逐层的进行包装:package:,返回的dispath会覆盖store中dispatch。

redux源码解析

bindActionCreators

bindActionCreators在平时工作中出镜率很少,bindActionCreators主要用处是将dispatch方法包装到 action creator 中。bindActionCreators的源码很简单。下面是具体实现。

redux源码解析

查看原文: redux源码解析

  • heavycat
  • bluebutterfly
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。