HOC高阶组件将redux的state和dispatch注入到类组件的props里

HOC（高阶组件）是一种函数，接收一个组件并返回一个新的组件，新组件具有被包装组件的所有props和功能。在React中，HOC通常用于将一些共享逻辑和状态从多个组件中抽象出来，以便更好地重用和管理。

在Redux中，HOC通常用于将Redux的state和dispatch注入到组件的props中，以便组件可以访问和操作Redux store中的数据。这种HOC通常被称为“连接器”（connectors），因为它们将组件连接到Redux store。

在React-Redux中，connect()函数是一个常用的HOC，用于将Redux的state和dispatch注入到组件的props中。它接收两个参数：mapStateToProps和mapDispatchToProps。mapStateToProps用于将Redux的state映射到组件的props中，而mapDispatchToProps用于将Redux的dispatch映射到组件的props中。通常情况下，我们只需要传入mapStateToProps参数即可，因为React-Redux会自动将dispatch注入到组件的props中。

下面是一个使用connect()函数将Redux的state和dispatch注入到类组件的props中的示例：

import { connect } from 'react-redux';
import { incrementCounter, decrementCounter } from '../actions';

class Counter extends React.Component {
  render() {
    const { count, incrementCounter, decrementCounter } = this.props;
    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={incrementCounter}>Increment</button>
        <button onClick={decrementCounter}>Decrement</button>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  count: state.count,
});

const mapDispatchToProps = {
  incrementCounter,
  decrementCounter,
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

在上面的示例中，我们首先导入了connect()函数、incrementCounter()和decrementCounter()两个action creators。然后，我们定义了一个Counter组件，它将从props中获取count、incrementCounter和decrementCounter三个属性。在组件的render()方法中，我们将这三个属性用于显示当前计数器的值和两个按钮，分别用于增加和减少计数器的值。

接下来，我们定义了两个函数：mapStateToProps和mapDispatchToProps。mapStateToProps函数将Redux的state映射到组件的props中，将count属性设置为state.count。mapDispatchToProps函数将Redux的dispatch映射到组件的props中，将incrementCounter和decrementCounter两个action creators设置为props中的属性。

最后，我们将Counter组件传递给connect()函数，并将mapStateToProps和mapDispatchToProps作为参数传递给它。connect()函数将返回一个新的组件，它将Redux的state和dispatch注入到Counter组件的props中。我们通过export default语句将这个新的组件导出，以便其他组件可以使用它。