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

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

什么是Hook？

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

让我们看一个例子。

一个像这样的React类组件：

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

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

  render() {
    return (
      

        
Count: {this.state.count}

        <button>Add/<button>
       

    );
  }
}/<code>

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

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

  return (
    

      
Count: {count}

      <button> setCount(count + 1)}>Add/<button>
    

  );
};/<code>

如果您想进一步了解Hooks，建议您阅读有关Hooks的详细文档。

回到正题

本文的原始目的是介绍如何将Redux与Hooks结合使用。

React Redux现在提供了useSelector和useDispatch

useSelector是连接mapStateToProps的替代方法。向其传递了一个函数，该函数使用Redux的存储状态并返回所需的状态。

useDispatch替换connect的mapDispatchToProps。它所做的只是返回store的dispatch方法，因此我们可以手动调用dispatch。

理论已经够多了，让我们看一个实际示例。在该示例中，我们将使用connect的React组件转换为使用Hooks的组件。

使用connect：

<code>import React from "react";
import { connect } from "react-redux";
import { addCount } from "./store/counter/actions";

export const Count = ({ count, addCount }) => {
  return (
    <>
      
Count: {count}

      <button>Count/<button>
    >
  );
}; 


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

const mapDispatchToProps = { addCount };

export default connect(mapStateToProps, mapDispatchToProps)(Count);/<code>

现在，使用新的React Redux Hooks代替connect：

<code>import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { addCount } from "./store/counter/actions";

export const Count = () => {
  const count = useSelector(state => state.counter.count);
  const dispatch = useDispatch();

  return (
    <>
      
Count: {count}

      <button> dispatch(addCount())}>
        Count
      /<button>
    >
  );
};/<code>

如您所见，代码是精简的，更少的代码通常意味着更好的性能。它更易于阅读，易于理解，当然也更易于测试。

不使用高阶组件的另一个好处是不再产生多余的"虚拟DOM包装"：

现在，我们已经了解和学习了Hooks的基础知识，以及如何将它们与Redux一起使用。编程愉快！

閱讀更多 前端知否 的文章

關鍵字: connect 使用 Count