Redux story-1:who creates it?

媒介

 这是一个系列文章,旨在分享在react及相干手艺栈实践历程当中的个人感悟,心得。假如有不好的处所,迎接列位批评指正。

 由于对react本身还未深切相识,本日我们先来谈一谈redux相干的题目。

Who creates it?

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

 在我最初相识到他的时刻,我以为他异常有礼貌。同时,也为了更多的相识redux,我想象最先浏览他的每一条tweet,本来想象的是从15年7月最先,厥后由于愿望迟缓,而且react版本也已发作很大变化了,因而便从16年1月1日最先浏览,现在记录到7月15日了。实际也证实,在这个历程当中,的的确确进修到了许多东西。包含redux的文档及redux-links的作者Mark Erikson,以及外洋许多写过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也屡次提到过库的运用场景的题目,发起人人用之前先相识本身为何要运用,它处理了哪些痛点,然后再去运用。以至特地提过issue,来相识react-router-redux的作用。

 除此之外,也提到在时候富余的情况下,进修react,应当先从本身入手,ES6,webpack,jsx,redux等等和react本身都是没有直接联络的,在进修完react以后,我们知道了他本身的哪些不足,哪些处所须要增强,哪些处所须要引入第三方库去处理,处理的是哪些痛点,我们再去相识这些东西,才真正体味到他们的威力。

 说到这里,轻微有一点远了,不过我以为照样有必要说起一下。那就是,我们身处一个急躁的社会,无论是在实际中看待朋侪,亲人,陌生人,由于进修,事情,生涯的压力,方圆的急躁气氛的影响,多多少少也会让本身带着些许暴戾之气。在收集上,由于束缚的放宽,我们或许更会将压制的情绪释放给广袤的收集天下,在微博,贴吧,知乎上,我们或多或少书写着,察觉着如许的行动。

 然则,作为一位顺序猿,我照样期待可以看到我们这个圈子更多的将时候,精神,勤奋消费在对现有手艺的革新,对未知天下的探究,追随顺序,库,框架,头脑的实质,交友同舟共济的朋侪,一同交换,分享,思索对手艺的意见。而不是卷入无休止的撕逼,用了某某而发生的优胜,以至借诽谤别人来抬高本身。

 我们可以明白一时的怫郁之情,由于我们大多,真是只是普普通通的社会人,喜怒哀乐再寻常不过。但若我们一向坚持这类状况,永久在上面这些场景都留下对人不对事的话语,挖苦,以至叱骂。愿望人人能为我们的子女想一想。

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