关于react-redux中的connect函数

示例代码

 1 'use strict';
 2 import React from 'react';
 3 
 4 import {
 5     connect
 6 } from 'react-redux';
 7 class demo extends React.Component {
 8     constructor(props) {
 9         super(props);
10         this.state = {
11 
12         }
13 
14     }
15 
16     render() {
17 
18         return (
19             <div className="page-content">
20 
21             </div>
22           )
23     }
24 }
25 export default connect(state => {
26     return {
27         demo: state.demo
28     }
29 })(demo);

作用

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

使用

1 const App = () => {
2   return (
3     <Provider store={store}>
4       <demo/>
5     </Provider>
6   )
7 };

• 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