博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Redux story-1:who creates it?
阅读量:5918 次
发布时间:2019-06-19

本文共 4547 字,大约阅读时间需要 15 分钟。

前言

 这是一个系列文章,旨在分享在react及相关技术栈实践过程中的个人感悟,心得。如果有不好的地方,欢迎各位批评指正。

 由于对react本身还未深入了解,今天我们先来谈一谈redux相关的问题。

Who creates it?

 是redux的作者,同时,他也是Create React App, React Hot Loader作者。当然1年前,他也由于redux及相关的开源贡献加入了facebook(他大二就辍学了,之前还当过.net工程师)。

 在我最初了解到他的时候,我觉得他非常有礼貌。同时,也为了更多的了解redux,我计划开始阅读他的每一条tweet,原先计划的是从15年7月开始,后来因为进展缓慢,而且react版本也已经发生很大变化了,于是便从16年1月1日开始阅读,目前记录到7月15日了。事实也证明,在这个过程中,的的确确学习到了很多东西。包括redux的文档及redux-links的作者,以及国外很多写过redux系列的朋友们。

 如果你有兴趣的话,可以看看我摘录的。其中除了知识性的内容外,还有一些关于它自己生活,经历,学习方法,如何面对JS疲劳等等的摘录。也让我渐渐的了解到了国外的程序员们的一些观点,兴趣,梗等等。

正文

 好了,暂时先介绍到这里了。切回redux本身,下面是学习源码过程中自己的一些体会。

createStore

createStore的第3个参数为enhancer,如果enhancer有多个,那么应该使用compose的方式组合多个enhancer

 且每个enhancer的模板为export default createStore => (reducer, preloadedState, enhancer) => {...}

 因为在createStore中执行了:return enhancer(createStore)(reducer, preloadedState)

 另外,上面的提到的形如(reducer, preloadedState, enhancer) => {...} 这个样子的其实都可以叫做createStore

 这也是社区有那么多enhancer的原因,他们可以形成一个enhancer链,我调用你的createStore,然后返回我的createStore供下一级调用

 所以在自己的createStore的函数体中经常能看到诸如var store = createStore(reducer, preloadedState, enhancer);这样的用法,目的就是让自己这一级之前的enhancer产生一个store出来,而之前的enhancer里的createStore又会调用之前的,到最尽头,就是redux本身的createStore

applyMiddleware

applyMiddleware的目的是返回一个enhancer,这个enhancer存储了1个或者多个中间件,中间件在上一级的dispatch方法的基础上增添自己的逻辑,然后返回自己的dispatch方法

 对于中间件而言,中间件的模板为:export default store => next => action => {...}。有的地方也写成export default _ref => next => action => {...}或者export default ({getState, dispatch}) => next => action => {...},看自己喜好了

 实际的调用顺序如下(定义在reduxapplyMiddleware.js中):

1. middleware(middlewareAPI);/*    var middlewareAPI = {      getState: store.getState,      dispatch: (action) => dispatch(action)    };        chain = middlewares.map(middleware => middleware(middlewareAPI));    dispatch = compose(...chain)(store.dispatch);    第1步即为第1次执行中间件,用redux自己的dipatch初始化各个中间件里的dispatch(也就是中间件的next参数)和getState。    从而确保至少redux本身能够正常工作,中间件的store或者_ref即为这里的middlewareAPI* */2. dispatch = compose(...chain)(store.dispatch);/*    第2步即为第2次执行中间件    即用compose的形式链式调用第1步返回的中间件集合,如果中间件是定义在applyMiddleware的最后一个    那么中间件里的next为store.dispatch,否则next为上一个中间件返回的结果,可以理解为上一个中间件    返回的是封装了dispatch的自己的dispatch,这里的原理其实和enhancer一模一样    enhancer的目的是封装多次createStore并用compose的方式进行调用    middleware的目的是封装多次dispatch并用compose的方式进行调用* */总结:/*    所以最后在redux的createStore.js中return的enhancer(createStore)(reducer, preloadedState)的结果就是一个增强    版的store,而这个增强版的store中存放的是增强版的dispatch* *//* ××××××××××××××××关于combineReducers×××××××××××××××*   从执行上来说,combineReducers实际上最后就是变成对reducers进行深度优先遍历并执行的过程*   从结构上来说,combineReducers决定了我们的state状态树的最终结构或者说形状,他是呈一个树型结构的*   combineReducers(reducerA, reducerB),reducerA里面嵌套combineReducers(reducerA-child1, reducerA-child2)*   实际上对应状态树而已就是第一层有两个节点A,B,而A节点下面有两个子节点A-child1,A-child2**   所以在最初设计的时候,我们要设想我们最终的状态树的样子,然后合理划分reducer,就像设计数据库的表结构一样。    当然这是比较概括的说法,事实上reducer的设计或者说state的划分有太多太多值得研究的东西,这个我们以后再谈了。* */

bindActionCreator

bindActionCreator实际就是给actionCreator外层再添加了一层函数,而这层函数存放了对dispatch的引用

function bindActionCreator(actionCreator, dispatch) {  return (...args) => dispatch(actionCreator(...args))}

所以我们可以一般在组件里直接调用bindActionCreator返回的actionCreator,即this.props.loadSomething(...)。而不用写成dispatch(actionCreator(...args)),实际上他们是等价的

connect

 既然提到了redux,由于目前我是采用react进行开发,所以不得不提到相关的react-redux。其中最重要的莫属于connect这个函数了。

 传入connect的组件在挂载到页面上后会调用store.subscribe进行订阅,订阅的目的是我们调用dispatch的时候,表明我们的状态树即将发生变化,这个时候我们希望我们的组件对应发生变化,而组件变化的唯一方式就是setState

 订阅就是告诉redux,这个组件是依赖于状态树的某部分工作的,所以当你变化的时候,记得获取最新的state,然后通知我,至于我如何响应,那就是我自己的事了,你只管通知我状态树发生了变化并把它传给我就行了。值得一提的是,connect内部进行了大量的性能优化,避免不必要的渲染,关于此以及mapStateToPropsmapDispathToProps,我们放到以后再谈。

结语

 篇幅有限,这一篇文章暂时就先这样啦,更多的内容,我想放在下一篇来分享,同时自己也在不断学习,希望能理解得更好。

 值得一提的是,我们也许会认为我们了解到的redux,mobx,rxjs等等完全不同理念的库,他们的作者也许也是"极端"的,是排斥他人及理念的。实际上,这是不正确的,早在16年5月,Dan就和mobx的作者在twitter上有过互动,他们达成了共识,那就是和对方一起合作,一起推动自身以及react的发展。

 对于redux-thunk,文档中也许会首先建议使用这个简单的库来处理异步相关的问题。对于复杂的应用,他们也推荐使用redux-saga这样的库去重构自己的代码。在twitter上,Dan也多次提到过库的应用场景的问题,建议大家用之前先了解自己为什么要使用,它解决了哪些痛点,然后再去使用。甚至特意提过,来了解react-router-redux的作用。

 除此之外,也提到在时间充裕的情况下,学习react,应该先从本身入手,ES6,webpack,jsx,redux等等和react本身都是没有直接联系的,在学习完react之后,我们知道了他本身的哪些不足,哪些地方需要加强,哪些地方需要引入第三方库去解决,解决的是哪些痛点,我们再去了解这些工具,才能真正体会到他们的威力。

 说到这里,稍微有一点远了,不过我觉得还是有必要提及一下。那就是,我们身处一个浮躁的社会,无论是在现实中对待朋友,亲人,陌生人,由于学习,工作,生活的压力,周遭的浮躁氛围的影响,多多少少也会让自己带着些许暴戾之气。在网络上,由于约束的放宽,我们也许更会将压抑的情感释放给广袤的网络世界,在微博,贴吧,知乎上,我们或多或少书写着,察觉着这样的行为。

 但是,作为一名程序猿,我还是期待能够看到我们这个圈子更多的将时间,精力,努力花费在对现有技术的改进,对未知世界的探索,追寻程序,库,框架,思想的本质,结交志同道合的朋友,一起交流,分享,思考对技术的看法。而不是卷入无休止的撕逼,用了某某而产生的优越,甚至借贬低他人来抬高自己。

 我们可以理解一时的愤懑之情,因为我们大多,真是只是普普通通的社会人,喜怒哀乐再平常不过。但若我们一直保持这种状态,永远在上面这些场景都留下对人不对事的话语,讥讽,甚至谩骂。希望大家能为我们的后代想想。

转载地址:http://tcbvx.baihongyu.com/

你可能感兴趣的文章
SQL Server 索引的自动维护 <第十三篇>
查看>>
C#项目代码规范
查看>>
Windows Server Backup备份Exchange2010
查看>>
SQL Over
查看>>
程序员高效编程的14点建议
查看>>
Android之布局属性
查看>>
rpc简介、原理、实例
查看>>
Python Errors and Exceptions
查看>>
WinCE平台的程序编译到Win32平台下运行
查看>>
Tomcat全攻略
查看>>
java中接口的定义与实现
查看>>
【NOIP模拟题】行动!行动!(spfa+优化)
查看>>
javascript代码混淆原理
查看>>
约瑟夫问题--list模拟循环链表
查看>>
一些聪明人没少干的傻事
查看>>
使用jQuery和CSS3生成的搜索框变形全屏搜索效果
查看>>
iOS应用程序生命周期(前后台切换,应用的各种状态)详解
查看>>
Bulestacks模拟器Bulestacks.prop文件里中英文对照表
查看>>
Android利用SQLiteStatement提高数据库插入数据的效率
查看>>
socketpair的使用
查看>>