关于react-redux中的connect函数

示例代码

 'use strict';
 import React from 'react';

 import {
     connect
 } from 'react-redux';
 class demo extends React.Component {
     constructor(props) {
         super(props);
         this.state = {

         }

     }

     render() {

         return (
             <div className="page-content">

             </div>
           )
     }
 }
 export default connect(state => {
     return {
         demo: state.demo
     }
 })(demo);

作用

连接React组件与 Redux store ，允许我们将 store 中的数据作为 props 绑定到组件上。

使用

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

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

export default connect(state => {
    return {
        demo: state.demo
    }
})(demo);

• connect 函数可以将redux的小状态机单独传入react组件（即只传入你需要的部分），不必把state全部传入，如上面示例中就只传入了state.demo.
• 当readux里面相应的值改变时，connect会重新调用，生成新的props，这样react组件接受新的props,就会重新渲染。

原理

connect之所以会成功，是因为Provider组件：

• 在原应用组件上包裹一层，使原来整个应用成为Provider的子组件
• 接收Redux的store作为props，通过context对象传递给子孙组件上的connect