React 实践心得：react-redux 之 connect 方法详解

   <p><img src="https://simg.open-open.com/show/b9a668312d0b71778476c36d89037b2f.jpg"></p>    <p>Redux 是「React 全家桶」中极为重要的一员，它试图为 React 应用提供「可预测化的状态管理」机制。Redux 本身足够简单，除了 React，它还能够支持其他界面框架。所以如果要将 Redux 和 React 结合起来使用，就还需要一些额外的工具，其中最重要的莫过于 react-redux 了。</p>    <p>react-redux 提供了两个重要的对象， Provider 和 connect ，前者使 React 组件可被连接（connectable），后者把 React 组件和 Redux 的 store 真正连接起来。react-redux 的文档中，对 connect 的描述是一段晦涩难懂的英文，在初学 redux 的时候，我对着这段文档阅读了很久，都没有全部弄明白其中的意思（大概就是，单词我都认识，连起来啥意思就不明白了的感觉吧）。</p>    <p>在使用了一段时间 redux 后，本文尝试再次回到这里，给 <a href="/misc/goto?guid=4959671501474108319" rel="nofollow,noindex">这段文档</a> （同时摘抄在附录中）一个靠谱的解读。</p>    <h2>预备知识</h2>    <p>首先回顾一下 redux 的基本用法。如果你还没有阅读过 redux 的文档，你一定要先去 <a href="/misc/goto?guid=4959676986111886766" rel="nofollow,noindex">阅读一下</a> 。</p>    <pre>  <code class="language-javascript">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}  </code></pre>    <p>通过 reducer 创建一个 store ，每当我们在 store 上 dispatch 一个 action ， store 内的数据就会相应地发生变化。</p>    <p>我们当然可以 <strong>直接</strong> 在 React 中使用 Redux：在最外层容器组件中初始化 store ，然后将 state 上的属性作为 props 层层传递下去。</p>    <pre>  <code class="language-javascript">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())}   />   }  }  </code></pre>    <p>但这并不是最佳的方式。最佳的方式是使用 react-redux 提供的 Provider 和 connect 方法。</p>    <h2>使用 react-redux</h2>    <p>首先在最外层容器中，把所有内容包裹在 Provider 组件中，将之前创建的 store 作为 prop 传给 Provider 。</p>    <pre>  <code class="language-javascript">const App = () => {    return (      <Provider store={store}>   <Comp/>   </Provider>    )  };  </code></pre>    <p>Provider 内的任何一个组件（比如这里的 Comp ），如果需要使用 state 中的数据，就必须是「被 connect 过的」组件——使用 connect 方法对「你编写的组件（ MyComp ）」进行包装后的产物。</p>    <pre>  <code class="language-javascript">class MyComp extends Component {    // content...  }    const Comp = connect(...args)(MyComp);  </code></pre>    <p>可见， connect 方法是重中之重。</p>    <h2>connect 详解</h2>    <p>究竟 connect 方法到底做了什么，我们来一探究竟。</p>    <p>首先看下函数的签名：</p>    <p>connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])</p>    <p>connect() 接收四个参数，它们分别是 mapStateToProps ， mapDispatchToProps ， mergeProps 和 options 。</p>    <h3>mapStateToProps(state, ownProps) : stateProps</h3>    <p>这个函数允许我们将 store 中的数据作为 props 绑定到组件上。</p>    <pre>  <code class="language-javascript">const mapStateToProps = (state) => {    return {      count: state.count    }  }  </code></pre>    <p>这个函数的第一个参数就是 Redux 的 store ，我们从中摘取了 count 属性。因为返回了具有 count 属性的对象，所以 MyComp 会有名为 count 的 props 字段。</p>    <pre>  <code class="language-javascript">class MyComp extends Component {    render(){      return <div>计数：{this.props.count}次</div>    }  }    const Comp = connect(...args)(MyComp);  </code></pre>    <p>当然，你不必将 state 中的数据原封不动地传入组件，可以根据 state 中的数据，动态地输出组件需要的（最小）属性。</p>    <pre>  <code class="language-javascript">const mapStateToProps = (state) => {    return {      greaterThanFive: state.count > 5    }  }  </code></pre>    <p>函数的第二个参数 ownProps ，是 MyComp 自己的 props 。有的时候， ownProps 也会对其产生影响。比如，当你在 store 中维护了一个用户列表，而你的组件 MyComp 只关心一个用户（通过 props 中的 userId 体现）。</p>    <pre>  <code class="language-javascript">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);  </code></pre>    <p>当 state 变化，或者 ownProps 变化的时候， mapStateToProps 都会被调用，计算出一个新的 stateProps ，（在与 ownProps merge 后）更新给 MyComp 。</p>    <p>这就是将 Redux store 中的数据连接到组件的基本方式。</p>    <h3>mapDispatchToProps(dispatch, ownProps): dispatchProps</h3>    <p>connect 的第二个参数是 mapDispatchToProps ，它的功能是，将 action 作为 props 绑定到 MyComp 上。</p>    <pre>  <code class="language-javascript">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);  </code></pre>    <p>由于 mapDispatchToProps 方法返回了具有 increase 属性和 decrease 属性的对象，这两个属性也会成为 MyComp 的 props 。</p>    <p>如上所示，调用 actions.increase() 只能得到一个 action 对象 {type:'INCREASE'} ，要触发这个 action 必须在 store 上调用 dispatch 方法。 diapatch 正是 mapDispatchToProps 的第一个参数。但是，为了不让 MyComp 组件感知到 dispatch 的存在，我们需要将 increase 和 decrease 两个函数包装一下，使之成为直接可被调用的函数（即，调用该方法就会触发 dispatch ）。</p>    <p>Redux 本身提供了 bindActionCreators 函数，来将 action 包装成直接可被调用的函数。</p>    <pre>  <code class="language-javascript">import {bindActionCreators} from 'redux';    const mapDispatchToProps = (dispatch, ownProps) => {    return bindActionCreators({      increase: action.increase,      decrease: action.decrease    });  }  </code></pre>    <p>同样，当 ownProps 变化的时候，该函数也会被调用，生成一个新的 dispatchProps ，（在与 statePrope 和 ownProps merge 后）更新给 MyComp 。注意， action 的变化不会引起上述过程，默认 action 在组件的生命周期中是固定的。</p>    <h3>[mergeProps(stateProps, dispatchProps, ownProps): props]</h3>    <p>之前说过，不管是 stateProps 还是 dispatchProps ，都需要和 ownProps merge 之后才会被赋给 MyComp 。 connect 的第三个参数就是用来做这件事。通常情况下，你可以不传这个参数， connect 就会使用 Object.assign 替代该方法。</p>    <h3>其他</h3>    <p>最后还有一个 options 选项，比较简单，基本上也不大会用到（尤其是你遵循了其他的一些 React 的「最佳实践」的时候），本文就略过了。希望了解的同学可以直接看文档。</p>    <p>（完）</p>    <p> </p>    <p>来自：http://taobaofed.org/blog/2016/08/18/react-redux-connect/</p>    <p> </p>    <p><span style="background:rgb(189, 8, 28) url("data:image/svg+xml; border-radius:2px; border:medium none; color:rgb(255, 255, 255); cursor:pointer; display:none; font:bold 11px/20px "Helvetica Neue",Helvetica,sans-serif; left:30px; opacity:0.85; padding:0px 4px 0px 0px; position:absolute; text-align:center; text-indent:20px; top:30px; width:auto; z-index:8675309">Save</span></p>