示例代码

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             
     
      20 21             
     
22           )23     }24 }25 export default connect(state => {26     return {27         demo: state.demo28     }29 })(demo);

作用

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

使用

1 const App = () => {2   return (3     
     
      4       
      5     
     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