redux

Redux

Redux 是JavaScript状态的容器，提供可预测化的状态管理

Redux不是React必须的，也没有任何的依赖。它可以运用到很多前端框架中，例：vue angular 等。还可以用jQuery ，以及原生的js中，它只是一个数据流的管理工具。

使用Redux来管理React的数据流，我们可以先熟悉一下React的数据流：

• React推崇的是单向数据流，自上而下进行数据传递。
• 父组件可以通过Props将数据传给子组件。
• 子组件可以通过回调函数来将数据传递到父组件。
• 多级嵌套组件可以通过getChildContext来传递，这样避免的使用props来进行多级传递，需要接受数据的子组件通过this.context可以获取到

但是同级之间别的组件之间的传递，需要将数据传到共同的父级元素（组件）中，然乎通过props进行分发，但是如果数目众多，层级较深的话，会很难管理。这个时候Redux会很有用。

流程图：

Paste_Image.png

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()

其他两个参数对于小编来说没怎么用过（大神们如果可以补充的话感激。。。。）。