redux源码分析

Sike 发布于2019-08-23 11:51 / 829人阅读

摘要：背景如今在如此复杂的前端交互和逻辑中，如果是单靠框架，，是远远不够的，还需要一个对内部的数据状态进行管理的机制才行，而对于这种数据管理机制如今较为热门是主要有几个，，这次主要讲述的就是对源码进行分析。

由于这段时间一直很忙，所以本想六月初研究完redux源码就写一篇博客记录一下自己的心得，但一直现在才空闲出来，废话不多说了，直接说主题吧。

背景：
如今在如此复杂的前端交互和逻辑中，如果是单靠UI框架（react，vue，angular）是远远不够的，还需要一个对内部的数据状态进行管理的机制才行，而对于这种数据管理机制如今较为热门是主要有几个：redux，vuex，mobx；这次主要讲述的就是对redux源码进行分析。

摘要：
redux主要分为有几个主要的api：createStore，combineReducer，applyMiddleWare，compose；本博客就这四个api进行较为详细的分析和阐述，以及个人的见解；

redux原理图：

redux结构图：

createStore

1）充分利用了高阶函数的特点，因为enchancer本身就将一系列中间件作为applymiddlewear第一个参数，然后只要判断enchancer是函数，就将createStore，reducer，preloadState分别传进去，最终返回一个对象，充分利用了applyMiddleWear和createStore这两者的嵌套。

2）就是个人觉得createStore直接返回一个字面量对象，对于单例模式来说不太严谨，因为单例模型就是一处创建，多处再创建都是只返回第一次的实例，这和angular中的server（服务）依赖注入不太像。

3）subscribe注册的listener不是针对于有个action的，所以多处地方注册，只要一个dispath，不相干的listener都会执行；

combineReducer

注意点：

更新一次state，相当于遍历了一次所有的reducer，但往往只有一个地方要改变，这造成了性能的不好：

combination(state = {}, action)中的state必须和reducers对象结构一致，就是说createStore中的initState必须和reducers一致；

compose

export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

解析：

因为middleware（简称MW）是一个数组，而要对store中的dispatch增强，必须将这些MW合成一个高阶复合函数，形式为a ( b ( c ( d ( params ) ) ) )；其中MW从左到右依次嵌套，左边的MW是右边MW的

外层函数包；

例如：现有MW数组[ A, B, D]；将这些MW合成一个函数；[ A, B, D].reduce((a, b) => (...args) => a(b(...args)))的过程为：

第一次：(A, B) => (...args) => a(b(...args)) ；假设返回的结果设为fn；则 fn = (...args) => A ( B ( args ) )；

第二次：(fn, D) => (...args) => a(b(...args)) ；假设返回的结果设为fn1；则 fn1 = (...args) => fn ( D ( args ) )；

最后返回的是 fn1 = （...args）=> A ( B ( D ( args ) ) )；

所以在applyMiddleware源码中，就有一句是：dispatch = compose(...chain)(store.dispatch)；

则套用上面的例子，dispatch = A ( B ( D ( store.dispatch ) ) );

applyMiddleWare

总结：本博客主要是针对源码进行流程上的解说和一些个人研究后的开发，下篇会简单介绍一下redux-react，特别是里面的一些坑。

GPU云服务器云服务器 redux源码 Redux redux-saga react-redux

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

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

redux源码分析之三：bindActionCreators.js

摘要：欢迎关注源码分析系列文章源码分析之一源码分析之二源码分析之三源码分析之四源码分析之五文件算是非常简单的一个文件了，该文件就实现一个目的以前这样触发一个，即，现在变成这样触发一个。目的很单纯，简化某个的调用。欢迎关注redux源码分析系列文章：redux源码分析之一：createStore.jsredux源码分析之二：combineReducers.jsredux源码分析之三：bind...

Dionysus_go 2019-08-21 17:48 评论0 收藏0
redux源码分析之二：combineReducers.js

摘要：欢迎关注源码分析系列文章源码分析之一源码分析之二源码分析之三源码分析之四源码分析之五文件对外暴露了一个函数，函数是的一个辅助性的函数，用于拆分里面的第一个参数函数。函数的返回值是一个函数，该函数是组合之后的一个标准的函数。欢迎关注redux源码分析系列文章：redux源码分析之一：createStore.jsredux源码分析之二：combineReducers.jsredux源码分...

big_cat 2019-08-21 17:03 评论0 收藏0
redux源码解读--applyMiddleware源码解析

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

Atom 2019-08-22 13:35 评论0 收藏0
redux 源码分析，实现一个迷你的redux

摘要：实现一个先不考虑中间件，实现一个简洁的实现是最主要的一个了，通过可以创建一个用来存放应用中所有的，一个应用只能有一个。方法是用来把每一个用方法包裹一下，因为可能只是返回一个具有属性的对象，只有用执行才有意义。正好可以利用的特性实现这个效果。实现一个redux 先不考虑中间件，实现一个简洁的redux 实现createStore createStore是redux最主要的一个API了，...

Ashin 2019-08-26 13:37 评论0 收藏0
【源码解析】redux-thunk

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

simpleapples 2019-08-21 17:10 评论0 收藏0