React 实践总结: react-redux 之 connec

2020-05-22 本文已影响0人潇湘轮回

转载注：

本文作者是淘宝前端团队的叶斋。笔者非常喜欢这篇文章，故重新排版并转载到这里，同时也加入了一些自己的体会。

原文地址：http://taobaofed.org/blog/201...

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

react-redux 提供了两个重要的对象，Provider和connect，前者使React组件可被连接（connectable），后者把 React 组件和 Redux 的 store 真正连接起来。react-redux 的文档中，对connect的描述是一段晦涩难懂的英文，在初学 redux 的时候，我对着这段文档阅读了很久，都没有全部弄明白其中的意思（大概就是，单词我都认识，连起来啥意思就不明白了的感觉吧）。

在使用了一段时间 redux 后，本文尝试再次回到这里，给这段文档一个靠谱的解读。

预备知识

首先回顾一下 redux 的基本用法。如果你还没有阅读过 redux 的文档，你一定要先去阅读一下。

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'})
}

const store = createStore(reducer);

store.subscribe(() =>
  console.log(store.getState())
);

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

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

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

class App extends Component{

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

  render(){
    return (
      <Comp
        state={this.state}
        onIncrease={()=>store.dispatch(actions.increase())}
        onDecrease={()=>store.dispatch(actions.decrease())}
      />
    )
  }
}

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

转载注

另一种方法，在入口文件index.js中初始化store，并将其export出来，然后import到定义组件的文件中去。

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

使用 react-redux

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

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

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

class MyComp extends Component {
  // content...
}

const Comp = connect(...args)(MyComp);

可见，connect方法是重中之重。

connect

究竟connect方法到底做了什么，我们来一探究竟。

首先看下函数的签名：

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

connect()接收四个参数，它们分别是mapStateToProps，mapDispatchToProps，mergeProps和options。

mapStateToProps

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(...args)(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。

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

什么叫做“MyComp自己的props”？假设在不使用 react-redux 的时候，MyComp的父组件是ParentComp，那么上文中的ownProps是ParentComp传递给MyComp的全部属性（对于下文中的方法mapDispatchToProps亦同）。也就是说，ownProps与 Redux 的store与state完全无关。

方法mapStateToProps为MyComp添加的属性，不可能被方法mapDispatchToProps访问到，反之亦然。因为，这涉及到 render 的时机和顺序的问题，笔者在这上面踩过相当多的坑。至于笔者为什么有这种需求，因为笔者设计了一个按钮，功能是：在点击后，根据当前的 state 计算出下一个 state，并更新。在经历了无数error以后，笔者终于意识到：react-redux 根本就不是设计用来解决这类问题的。解决方案有两种：一是，在设计 reducer 的时候，就直接根据 state 更新；二是，导入全局store并使用 store.getState() 获得当前state，然后根据这个state进行更新。

另外，如果使用PropTypes对MyComp做属性类型检查，方法mapStateToProps和方法mapDispatchToProps为MyComp添加的属性是存在的。

mapDispatchToProps

mapDispatchToProps(dispatch, ownProps): dispatchProps

connect 的第二个参数是mapDispatchToProps，它的功能是，将action作为props绑定到MyComp上。

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方法。dispatch正是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，（在与stateProps和ownProps merge 后）更新给MyComp。注意，action的变化不会引起上述过程，默认action在组件的生命周期中是固定的。

函数connect甚至react-redux的核心在于：将 Redux 中 store 的 state 绑定到组件的属性上，使得对 state 的修改能够直接体现为组件外观的更改。因此，参数mapStateToProps是非常重要的，但是参数mapDispatchToProps则比较多余——因为简单粗暴地导入全局 store 同样能达到相同的目的（事实上笔者就是这么做的）。

mergeProps

[mergeProps(stateProps, dispatchProps, ownProps): props]

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

options

最后还有一个options选项，比较简单，基本上也不大会用到（尤其是你遵循了其他的一些 React 的「最佳实践」的时候），本文就略过了。希望了解的同学可以直接看文档。

如果本文对您有帮助可以帮作者点个赞！