Redux，基础

在学习了React以后， 紧跟着而来的就是Redux了~

 

在系统性的学习一个东西的时候， 了解其背景、设计以及解决了什么问题都是很是必要的。

接下来记录的是， 我我的在学习Redux时的一些杂七杂八~

 

Redux是什么？

通俗理解

https://www.zhihu.com/question/41312576/answer/340471373

 

介绍

先从官方的一句介绍看起：

Redux is a predictable state container for JavaScript apps. （Redux是Javascript应用程序的可预测状态容器。）

固然，假如你在这以前并无接触过相关的状态管理库或者框架， 看到这句话时是很是的懵逼的， 不过能够带着这句话来一步步探索~

 

背景

随着Javascript单页面应用开发日趋复杂，JavaScript 须要管理比任什么时候候都要多的 state （状态）。 这些 state 可能包括服务器响应、缓存数据、本地生成还没有持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。管理不断变化的 state 很是困难。若是一个 model 的变化会引发另外一个 model 变化，那么当 view 变化时，就可能引发对应 model 以及另外一个 model 的变化，依次地，可能会引发另外一个 view 的变化。直至你搞不清楚到底发生了什么。 -- Redux文档

上面这一大段引用概况起来就是一句话， state（状态）在何时什么地方，由于什么而变化成了一个不受控制的过程。（这不能忍，状态若是没法预测以及控制）

那么Redux就是试图让 state 的变化变得可预测。这些限制条件反映在 Redux 的三大原则中。

 

核心概念

　　1.Redux使用普通的对象来描述state，这个对象就是Modal。

　　

　　2.要想更新 state 中的数据，你须要发起一个 action。Action 就是一个普通 JavaScript 对象用来描述发生了什么。

　　

　　3.为了把 action 和 state 串起来，开发一些函数，这就是 reducer。reducer 只是一个接收 state 和 action，并返回新的 state 的函数。

　　

 

 

三大准则

• 只有一个state树。

• state是只读的，只能经过action改变。

• reducer是纯函数，没有反作用。

   了解到这些后，其实已经多少能明白Redux is a predictable state container for JavaScript apps. （Redux是Javascript应用程序的可预测状态容器。）这句话，为何是可预测的？ 由于只有一个state树，而且它是只读的，并且只能经过action来改变（改变的过程变得清晰可追踪），而且获取state（状态）只能经过reducer，而reducer是一个纯函数（此处了解state是重点），没有反作用，也就意味着咱们能知道咱们最终获得的state是什么样的。

 

api简介

• createStore(reducer, [preloadedState], [enhancer]) 
  　　----建立store的函数，返回一个对象， 包含getState\dispatch\subscribe\getReducer\replaceReducer等方法
• combineReducers(reducers) 
  　　----合并多个reducer
• applyMiddleware(...middlewares) 
  　　----中间件处理，在 实际的dispatch前调用一系列中间件， 相似于koa
• bindActionCreators(actionCreators, dispatch) 
  　　----绑定action和dispatch
• compose(...functions) 
  　　----函数式编程中常见的方法， compose(funcA, funcB, funcC) => compose(funcA(funcB(funcC())))
  

 

React-redux

介绍

Redux官方提供的 React 绑定库。 具备高效且灵活的特性。

 

动机

React是以组件化的形式开发。为了组件的复用以及代码的清晰，一般咱们将组件分为容器组件以及UI组件。

关于容器组件和UI组件，推荐阅读该文章 https://github.com/Hancoson/blog/issues/16，而引入了React-redux能够很好的帮助咱们分离容器组件和UI组件。

 

为何选择react-redux

• react-redux是官方提供的绑定库，由redux开发者维护，能够很好的与redux保持同步。
• 它鼓励组件分离。react-redux协助咱们分离容器组件和UI组件，经过提供API链接store（提供数据）和UI组件，而且使得UI组件不须要知道存在Redux（复用）。
• 性能优化。虽然React速度很快，可是re-redering是很是消耗性能的，而react-redux的内部作了许多性能优化。
• 社区支持，由于是官方指定的绑定库，因此拥有大量的使用者，社区活跃度高，问题也容易解决。

 

api简介

<Provider  store> 
　　----使组件层级中的 connect() 方法都可以得到 Redux store。
　　----store:  应用程序中惟一的 Redux store 对象

connect(mapStateToProps, mapDispatchToProps, mergeProps, options)

　　　 mapStateToProps(state, [ownProps]): stateProps: 

　　　　　　----映射state做为UI组件的props

mapDispatchToProps(dispatch, [ownProps]): dispatchProps：

 　　----映射dispatch做为UI组件的props

mergeProps(stateProps, dispatchProps, ownProps): props: 

 　　----若是指定这个函数， 即合并mapStateToProps\mapDIspatchToProps\oweProps做为UI组件的props

options: 

　　　----定制 connector 的行为

 

Redux存在的问题（解决的方案）？

与其说缺点，不如说是Redux的优点而形成的不可避免的劣势，问题应该辩证地看~

• 纯净。Redux只支持同步，让状态可预测，方便测试。 但不处理异步、反作用的状况，而把这个丢给了其余中间件，诸如redux-thunk\redux-promise\redux-saga等等，选择多也容易形成混乱~

• 啰嗦。那么写过Redux的人，都知道action\reducer\以及你的业务代码很是啰嗦，模板代码很是多。可是~，这也是为了让数据的流动清晰明了。

• 性能。粗暴地、级联式刷新视图（使用react-redux优化)。

• 分型。原生 Redux-react 没有分形结构，中心化 store；

 

Redux的最佳实践？

vuex（dva）

事实上，若是用过vuex或者dva的话， 我的以为仍是会比较偏向于这种用法。比起Redux的啰嗦，dva帮忙简化了不少步骤。具体的实现后续补充~

这里先补充一点，vuex不是immutable，因此对于时间旅行这种业务不太友好。

 

Redux的实现浅析？

前言

Redux的代码相对比较简单，容易理解， 源码的解读推荐看这篇文章， 本段主要是对代码里一些我的以为比较有意思的点进行分析~

 

createStore

在这里看出，redux即便是在内部，也是函数式编程~

当咱们传入了一个enhancer函数（即中间件），会把createStore自己当成参数传给enhancer而后返回一个新的函数来调用 即 fn => fn

 

　　暴露出的subscribe函数也是挺有意思的， 首先是isSubscribed这个变量， 其实就是一种很是基础的闭包使用，

　　而后是每次订阅或者取消订阅的时候，都会在dispatch以前保存一次快照， 而后当前的dispatch用的是上一份快照，而下一个dispatch则是使用当前这一份的快照

 

compose

很是简洁的写出了函数式编程的一个经常使用函数(...args) => f(g(h(...args))).

 

combineReducer

　　能够看出，每一次action都会从新计算全部的reducer~ 但若是不是很是巨大的state树，而且拆分了不少模块，我的认为其实影响不大

 

bindActionCreator和applyMiddleware相对容易理解， 这里就不赘述啦

 

完......