专栏首页前端知否如何将Redux与React Hooks一起使用

如何将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>
  );
};

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

回到正题

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

React Redux现在提供了useSelectoruseDispatch 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一起使用。编程愉快!

本文分享自微信公众号 - 前端知否(qianduanzhifou),作者:QETHAN

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何在Nuxt应用程序中加载外部脚本

    我需要加载一个样式表和几个脚本。我将分享我如何使用Nuxt完成此操作以及实现此操作的不同方法。

    前端知否
  • 以编程方式创建Vue.js组件实例

    最近参与了一个Vue.js项目,项目中需要能够以编程方式创建组件。通过编程,意思是使用JavaScript创建和插入组件,而无需在模板中编写任何内容。

    前端知否
  • React Hooks系列之useState

    React 16.7 alpha之后,可以在function组件中创建state了,不用再每次都需要创建一个class component,更加函数式了。

    前端知否
  • 如何实现 CLI 通过模板批量生成组件文件?

    上一篇 《如何用 Node.js 实现一个微型 CLI》 中介绍了如何使用 CLI 以及如何实现一个简单的问答式CLI。在文章的最后也提到我对于目前这个 CLI...

    林小帅
  • 万能的python-画图

    pyecharts是一个用于生成Echarts图标的类库。实际就是Echarts与Python的对接。

    py3study
  • 使用Python快速制作可视化报表

    pyecharts是一个用于生成Echarts图标的类库。实际就是Echarts与Python的对接。

    py3study
  • VUE之文字跑马灯效果

    Dream城堡
  • matlab使用

    x=[7.0  10.5  13.0  17.5  34.0  40.5  44.5  48.0  56.0  61.0  68.5  76.5  80.5...

    bear_fish
  • RethinkDB的简单介绍

    RethinkDB最早是作为一个对SSD进行专门优化的MySQL存储引擎出现的,其特点在于对SSD的充分利用。而目前RethinkDB已经脱离MySQL成为一个...

    Debian社区
  • 标准BST二叉搜索树写法

      本人最近被各种数据结构的实验折磨的不要不要的,特别是代码部分,对数据结构有严格的要求,比如写个BST要分成两个类,一个节点类,要给树类,关键是所以操作都要用...

    用户2038589

扫码关注云+社区

领取腾讯云代金券