如何将Redux与React Hooks一起使用

前端知否

发布于 2020-03-23 18:05:07

6.9K0

发布于 2020-03-23 18:05:07

文章被收录于专栏：前端知否前端知否

在本文中，让我们一起来学习如何将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>
  );
};

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

回到正题

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

React Redux现在提供了useSelector和useDispatch Hook，可以使用它们代替connect。

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

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

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

使用connect：

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

export const Count = ({ count, addCount }) => {
  return (
    <>
      <div>Count: {count}</div>
      <button onClick={addCount}>Count</button>
    </>
  );
};

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

const mapDispatchToProps = { addCount };

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

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

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 (
    <>
      <div>Count: {count}</div>
      <button onClick={() => dispatch(addCount())}>
        Count
      </button>
    </>
  );
};

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

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

最后

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

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-03-08，如有侵权请联系 cloudcommunity@tencent.com 删除

redux

react

本文分享自前端知否微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

redux

react

登录后参与评论

0 条评论

热度