react-redux

简介

react-redux 其实就是提供一个组件，整个 app 经过 connect 方法连接组件和 redux store

store 即为整个 app 的 state 仓库 根组件应该嵌套在中才能使用 connect 方法

connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(Component)

此方法调用两次，第一次是设置参数，第二次是将组件与 redux store 连接

mapStateToProps(state, ownProps): stateProps (Function)

state 表示 redux store 中的存值 ownProps 表示该组件接收的值 此组件即为 ownProps.value example：

const mapStateToProps = state =>{
  return {
    someVal: state.someVal
  }
}
复制代码

1.若是定义该参数，组件将会监听 redux store 的变化，只有 store 发生变化，mapStateToProps 函数就会被调用 2.若是省略这个参数，组件相应的也不会监听 store 的变化 3.该函数必须返回一个纯对象，该对象会与当前组件的 props 合并 4.若是定义 ownProps，只要组件接收新的 props，mapStateToProps 函数就会被调用

mapDispatchToProps(dispatch, ownProps): dispatchProps (Object or Function)

example:

const mapDispatchToProps = {
  someAction
}
复制代码

or:

const mapDispatchToProps = dispatch => {
  return {
    someFunction: (someArguments) => {
      dispatch(someAction(someArguments))
    }
  }
}
复制代码

1.若是是一个 Object,那么 obj 中的每一个值，都会被看成 action 中的方法 2.若是是一个 Function,接收一个 dispatch，返回一个对象 3.若是忽略此参数，默认 dispatch 会注入到当前组件 props 中 4.若是定义 ownProps，同 mapStateToProps

mergeProps(stateProps, dispatchProps, ownProps): props (Function)

example:

const mergeProps = (stateProps, dispatchProps, ownProps) => {
  return Object.assign({}, ownProps, {someProps: someMethodFilterState})
}
复制代码

其实就是合并各类 state，dispatch 到 props 中 1。若是指定该参数，mapStateToProps，mapDispatchToProps 的执行结果和当前组件自身的 props 将传入到此回调函数中，该回调函数返回的对象将做为 props 传到该组件中

options （Object）

pure = true default true 若是当前组件不依赖于任何的输入而只依赖于 props 和 redux store 中的 state，即纯组件，那么将会执行 shouldComponentUpdate，浅对比 mergeProps 的结果，避免没必要要的更新 withRef = false default false 若是为 true，会保存一个当前组件实例的引用，该引用经过 getWrappedInstance()方法得到

参考连接： React Redux