React-redux中的connect函数和provider的用法

前言

Redux 是「React 全家桶」中极为重要的一员，它试图为 React 应用提供「可预测化的状态管理」机制。Redux 本身足够简单，除了 React，它还能够支持其他界面框架。所以如果要将 Redux 和 React 结合起来使用，就还需要一些额外的工具，其中最重要的莫过于 react-redux 了

react-redux 提供了两个重要的对象，Provider 和 connect，前者使 React 组件可被连接（connectable），后者把 React 组件和 Redux 的 store 真正连接起来

redux中更新state的基本用法

方法一：

通过 reducer 创建一个 store，每当我们在 store 上 dispatch 一个 action，store 内的数据就会相应地发生变化。

const reducer = (state = {count: 0}, action) => {
  switch (action.type){
    case 'INCREASE': return {count: state.count + 1};
    case 'DECREASE': return {count: state.count - 1};
    default: return state;
  }
}

const actions = {
  increase: () => ({type: 'INCREASE'}),
  decrease: () => ({type: 'DECREASE'})
}

//通过 reducer 创建一个 store
const store = createStore(reducer);
//每当我们在 store 上 dispatch 一个 action,store 内的数据就会相应地发生变化。
store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch(actions.increase()) // {count: 1}
store.dispatch(actions.increase()) // {count: 2}
store.dispatch(actions.increase()) // {count: 3}

方法二

我们当然可以直接在 React 中使用 Redux：在最外层容器组件中初始化 store，然后将state 上的属性作为 props 层层传递下去。

//直接在 React 中使用 Redux：在最外层容器组件中初始化 store
class App extends Component{

  componentWillMount(){
    store.subscribe((state)=>this.setState(state))
  }

  render(){
//然后将state 上的属性作为 props 层层传递下去。
    return
	 <Comp state={this.state}
               onIncrease={()=>store.dispatch(actions.increase())}
               onDecrease={()=>store.dispatch(actions.decrease())}/>
  }
}

react-redux中更新state的方法

最佳的方式是使用 react-redux 提供的 Provider 和 connect 方法。

第一步：首先在最外层容器中，把所有内容包裹在 Provider 组件中，将之前创建的 store 作为prop 传给 Provider

const App = () => {
  return (
    <Provider store={store}>
      <Comp/>
    </Provider>
  )
};

注意：Provider 内的任何一个组件（比如这里的 Comp），如果需要使用 state 中的数据，就必须是「被 connect 过的」组件——使用 connect 方法对「你编写的组件（MyComp）」进行包装后的产物。
第二步：对需要使用state的数据进行【connet】连接

connect方法详解

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

connect的第一个参数：mapStateToProps(state, ownProps) : stateProps

功能：这个函数允许我们将 store 中的数据作为 props 绑定到组件上。

const mapStateToProps = (state) => {
  return {
    count: state.count
  }
}

这个函数的第一个参数就是 Redux 的 store，我们从中摘取了 count 属性。因为返回了具有 count 属性的对象，所以 MyComp 会有名为 count 的 props 字段。

class MyComp extends Component {
  render(){
    return <div>计数：{this.props.count}次</div>
  }
}

const Comp =  connect(mapStateToProps)(MyComp);

注意当然，你不必将 state 中的数据原封不动地传入组件，可以根据 state 中的数据，动态地输出组件需要的（最小）属性。

const mapStateToProps = (state) => {
  return {
    greaterThanFive: state.count > 5
  }
}

函数的第二个参数 ownProps，是 MyComp 自己的 props。有的时候，ownProps 也会对其产生影响

案例：比如，当你在 store 中维护了一个用户列表，而你的组件 MyComp 只关心一个用户（通过 props 中的 userId 体现）。

const mapStateToProps = (state, ownProps) => {
  // state 是 {userList: [{id: 0, name: '王二'}]}
  return {
    user: _.find(state.userList, {id: ownProps.userId})
  }
}

class MyComp extends Component {
  
  static PropTypes = {
    userId: PropTypes.string.isRequired,
    user: PropTypes.object
  };
  
  render(){
    return <div>用户名：{this.props.user.name}</div>
  }
}

const Comp = connect(mapStateToProps)(MyComp);

注意：当 state 变化，或者 ownProps 变化的时候，mapStateToProps 都会被调用，计算出一个新的stateProps，（在与 ownProps merge 后）更新给 MyComp

补充： _.find(collection, [predicate=_.identity], [fromIndex=0]) 方法介绍：

功能： _.find遍历集合对象，返回第一个调用predicate返回true的集合元素

参数：
collection (Array|Object): 需要查找元素的集合对象
[predicate=_.identity] (Function): 遍历调用的方法
[fromIndex=0] (number): 遍历的起始索引
返回值
返回第一个调用predicate返回true的集合元素，找不到返回undefined

案例：

var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];
 
_.find(users, function(o) { return o.age < 40; });
// => object for 'barney'
 
// The `_.matches` iteratee shorthand.
_.find(users, { 'age': 1, 'active': true });
// => object for 'pebbles'
 
// The `_.matchesProperty` iteratee shorthand.
_.find(users, ['active', false]);
// => object for 'fred'
 
// The `_.property` iteratee shorthand.
_.find(users, 'active');
// => object for 'barney'

以上就是将 Redux store 中的数据连接到组件的基本方式。

connect的第二个参数：mapDispatchToProps(dispatch, ownProps): dispatchProps

功能：将 action 作为 props 绑定到MyComp 上。

const mapStateToProps = (state, ownProps) => {
  return {
    count:state.count;
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increase: (...args) => dispatch(actions.increase(...args)),
    decrease: (...args) => dispatch(actions.decrease(...args))
  }
}

class MyComp extends Component {
  render(){
    const {count, increase, decrease} = this.props;
    return (<div>
      <div>计数：{this.props.count}次</div>
      <button onClick={increase}>增加</button>
      <button onClick={decrease}>减少</button>
    </div>)
  }
}

const Comp = connect(mapStateToProps， mapDispatchToProps)(MyComp)

由于 mapDispatchToProps 方法返回了具有 increase 属性和 decrease 属性的对象，这两个属性也会成为 MyComp 的 props。

如上所示，调用 actions.increase() 只能得到一个 action 对象 {type:'INCREASE'}，要触发这个 action 必须在 store 上调用 dispatch 方法。diapatch 正是 mapDispatchToProps 的第一个参数。但是，为了不让 MyComp 组件感知到 dispatch 的存在，我们需要将 increase 和decrease 两个函数包装一下，使之成为直接可被调用的函数（即，调用该方法就会触发dispatch）。

注意：Redux 本身提供了 bindActionCreators 函数，来将 action 包装成直接可被调用的函数。

import {bindActionCreators} from 'redux';

const mapDispatchToProps = (dispatch, ownProps) => {
  return bindActionCreators({
    increase: action.increase,
    decrease: action.decrease
  });
}

同样，当 ownProps 变化的时候，该函数也会被调用，生成一个新的 dispatchProps，（在与statePrope 和 ownProps merge 后）更新给 MyComp。注意，action 的变化不会引起上述过程，默认 action 在组件的生命周期中是固定的。

connect的第三个参数 [mergeProps(stateProps, dispatchProps, ownProps): props]

之前说过，不管是 stateProps 还是 dispatchProps，都需要和 ownProps merge 之后才会被赋给 MyComp。connect 的第三个参数就是用来做这件事。通常情况下，你可以不传这个参数，connect 就会使用 Object.assign 替代该方法。

connect的第四个参数 options

基本上也不大会用到，可以省略