Redux
Redux 是JavaScript状态的容器，提供可预测化的状态管理
Redux不是React必须的，也没有任何的依赖。它可以运用到很多前端框架中，例：vue angular 等。还可以用jQuery ，以及原生的js中，它只是一个数据流的管理工具。
使用Redux来管理React的数据流，我们可以先熟悉一下React的数据流：
- React推崇的是单向数据流，自上而下进行数据传递。
- 父组件可以通过Props将数据传给子组件。
- 子组件可以通过回调函数来将数据传递到父组件。
- 多级嵌套组件可以通过getChildContext来传递，这样避免的使用props来进行多级传递，需要接受数据的子组件通过this.context可以获取到
但是同级之间别的组件之间的传递，需要将数据传到共同的父级元素（组件）中，然乎通过props进行分发，但是如果数目众多，层级较深的话，会很难管理。这个时候Redux会很有用。
流程图：
Redux主要分为三个部分： Store Action Reducer
Redux主要的三大原则：
- 单一数据源：整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中
- State 是只读的：惟一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
- 使用纯函数来执行修改：为了描述 action 如何改变 state tree ，你需要编写 reducers。
使用React-Redux的开发流程为：
开发流程应该是这个样子的： component --> dispatch(actionCreater) --> reducer --> subscribe --> getState --> component
React-Redux是redux为结合React使用而创造出来的一个工具库，类似的还有vue-redux，angular-redux等。只是提供了一个API：connect， 一个组件Provider
Provider： 一个react的组件，它的作用就是在context中放入Redux的store，方便子组件获取。
关键代码：
export default class Provider extends Component {
getChildContext() {
return { store: this.store }
}
constructor(props, context) {
super(props, context)
this.store = props.store
}
render() {
const { childern } = this.props;
return Childern.only(childern)
}
}
这样connect组件就可以获取和使用store的方法了。
connect相对于Provider是比较复杂的。
connect函数方法
export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {})
connect函数接受四个参数，每个参数又若干种可选的形式，下面详解一下这四个参数：
-
mapStateToProps
mapStateToProps这一参数定义了我们需要从Redux状态树中提取哪些部分当作props传给当前组件。一般来说这也是我们使用connect时经常传入的参数。事实上如果不传入这个参数React组件将永远不会和Redux的状态树产生任何关系。
看一下代码：//决定组件会不会因state改变而更新 const shouldSubscribe = Boolean(mapStateToProps) //如果不传递这个参数使用默认state => ({}) const mapState = mapStateToProps || defaultMapStateToProps //mapDispatchToProps的处理，最后的情况实际是使用bindActionCreators处理 let mapDispatch if (typeof mapDispatchToProps === 'function') { mapDispatch = mapDispatchToProps } else if (!mapDispatchToProps) { mapDispatch = defaultMapDispatchToProps } else { mapDispatch = wrapActionCreators(mapDispatchToProps) } //不传递就使用默认值 const finalMergeProps = mergeProps || defaultMergeProps const { pure = true, withRef = false } = options
因此 如果尝试使用connect让组件与Redux状态树产生关联，第一个参数mapStateToProps可以说是**必传**的。
那么我们传入的mapStateToProps是怎么生效的的哪？ 我们可以查询connect类中定义的configureFinalMapState方法可以就能略知一二。
const mapState = mapStateToProps || defaultMapStateToProps
//..
class Connect extend Component {
configureFinalMapState(store, props) {
const mappedState = mapstate(store.getState(), props)
const isFactory = typeof mappedState === 'function'
this.finalMapStateToProps = isFactory ? mappedState : mapState
this.doStatePropsDependOnOwnProps = this.finalMapStateToProps.length !== 1
if(isFactory) {
return this.computeStateProps(store, props)
}
if(props.env.NOOE_NEV !== 'production') {
checkStateShape(mapState, 'mapStateToProps')
}
return mappedState
}
computeStateProps(store, props) {
if(!this.finalMapStateToProps) {
return this.configureFinalMapState(store, props)
}
const state = store.getState()
const stateProps = this.doStatePropsDependOnOwnProps ? this.finalMapStateToProps(store, props) : this.finalMapStateToProps(state)
if(process.env.NOOE_NEV !== 'production') {
checkStateShape(stateProps, 'mapStateToProps')
}
return stateProps
}
}
我们首先对connent中传入的mapStateToProps参数做了默认参数的校验，而defaultMapStateToProps只是一个空的对象而已。
在最终的渲染呗connect装饰过的组件时，会调用this.compputeStateProps 计算出最终从Redux状态树中提取了哪些值作为当前组件的props。
首先，将当前的store和props作为参数传给mapState，得到执行的结果，根据react-redux文档中的说明，一般情况下，传给connect的mapStateToProps函数必须返回一个对象，但是在某些特殊的情况下，比如需要针对个别组件进行极致优化的时候，mapStateToProps也可以返回一个函数，这也是源代码中需要判断返回的值是否为函数。
- mapDispatchToProps
这是connect接受的第二个参数，它接受store的dispatch作为第一个参数，同时接受this.props作为可选的第二个参数。利用这个方法我们可以在connect中方便将actionCreator与dispatch绑定在一起（利用bindActionCreator方法）最终绑定好的方法也会作为props传给当前的组件。
具体的设计思路和mapStateToProps的思路是一致的。除了mapDispatchToProps接受的第一个参数是store.dispatch而不是store.getState()
其他两个参数对于小编来说没怎么用过（大神们如果可以补充的话感激。。。。）。
