如何将Redux与React Hooks一起使用

在本文中，让我们一起来学习如何将Redux与React Hooks一起使用。

React Redux在2019年6月11日发布的7.1版中提供了对Hooks的支持。这意味着您可以在函数组件中将Redux与Hooks一起使用，而不是使用高阶组件（HOC）。

什么是Hook？

Hook是在React版本16.8中引入的，可以让我们访问函数组件中的状态和生命周期方法。

让我们看一个例子。

一个像这样的React类组件：

class Count extends React.Component {
  state = {
    count: 0
  }

  add = () => {
    this.setState({ count: this.state.count + 1 })
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.add}>Add</button>
      </div>
    );
  }
}

可以使用如下Hooks编写为函数组件：

const Count = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Add</button>
    </div>
  );
};