[译]如何结合React Hooks来使用Redux

本文做者：IMWeb IMWeb团队 原文出处：IMWeb社区 未经赞成，禁止转载

原文地址：itnext.io/how-to-use-…

React-redux 发布了 7.1.0 版本的 hooks 。 这意味着咱们可使用 React 的最新最佳实践。

Hooks 让咱们为相同的功能编写更少的代码。咱们须要编写的代码越少，咱们就能够越快地启动应用程序。

简单的 Redux 组件

这是一个很是基本和传统的 Redux 链接组件。您会如何使用 Hooks 来重构它?

import React, { Component } from "react";
import { connect } from "react-redux";
import { toggleSwitch } from "./UiReducer";

class Toggle extends Component {
  render() {
    const { ui, toggleSwitch } = this.props;
    return (
      <div> <div>{JSON.stringify(ui)}</div> <input type="checkbox" value={ui.toggle} onChange={toggleSwitch} /> </div> ); } } const mapStateToProps = ({ ui }) => ({ ui }); export default connect( mapStateToProps, { toggleSwitch } )(Toggle); 复制代码

上面是一个切换复选框的简单组件。 为了简单起见，咱们只有一个状态，toggle 是一个布尔值。

用Redux切换复选框

若是您对 hooks 有必定的了解，那么您可能知道 hooks 须要在函数组件中使用。您不能在 React 类中使用 hooks。

第1步 - 将类组件重构为函数组件

将 React 组件从类转换到函数组件是至关简单的。 咱们要作的就是

import React from "react";
import { connect } from "react-redux";
import { toggleSwitch } from "./UiReducer";

const Toggle = ({ ui, toggleSwitch }) => (
  <div> <div>{JSON.stringify(ui)}</div> <input type="checkbox" value={ui.toggle} onChange={toggleSwitch} /> </div> ); const mapStateToProps = ({ ui }) => ({ ui }); export default connect( mapStateToProps, { toggleSwitch } )(Toggle); 复制代码

注意：这个代码比以前的已经短了不少。咱们将类语法替换为更简单的函数语法。咱们还从箭头函数参数 props 中解构了 ui 和 toggleSwitch属性。 能够确定的是，切换仍然按预期工做。

Hooks 一般使用 use 关键字做前缀，好比 useState 或 useSelecor。

咱们目前从 store 读取状态的方法是经过 mapStateToProps 并将函数组件封装在 connect HOC中。

第2步 - useSelector

让咱们从使用 hooks 读取状态开始。咱们须要从 react-redux 包中导入 useSelector。使用 useSelector hook，咱们能够读取咱们的状态。

import React from "react";
import { connect, useSelector } from "react-redux";
import { toggleSwitch } from "./UiReducer";

const Toggle = ({ toggleSwitch }) => {
  const ui = useSelector(state => state.ui);
  return (
    <div> <div>{JSON.stringify(ui)}</div> <input type="checkbox" value={ui.toggle} onChange={toggleSwitch} /> </div> ); }; export default connect( null, { toggleSwitch } )(Toggle); 复制代码

注意：咱们删除了 ui 参数，并使用 useSelector hook。useSelector 的第一个参数是存储的状态。

第3步 - useDispatch

useDispatch hook 让咱们执行 redux 操做。 咱们从 react-redux 包导入 useDispatch hook。

使用 useDispatch 相对简单，咱们将 hook 实例保存在一个变量下。咱们能够在任何事件监听器中调用 dispatch 函数。

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { TOGGLE } from "./UiReducer";

const Toggle = () => {
  const ui = useSelector(state => state.ui);
  const dispatch = useDispatch();
  return (
    <div>
      <div>{JSON.stringify(ui)}</div>
      <input
        type="checkbox"
        value={ui.toggle}
        onChange={() => dispatch({ type: TOGGLE })}
      />
    </div>
  );
};

export default Toggle;
复制代码

注意：咱们在这里调用 dispatch 函数时使用类型常量 TOGGLE，咱们在 Redux 常量中定义了这个类型并将其导入到组件中。

export const TOGGLE = "ui/toggle";
复制代码

若是您想将 payload 传递给 dispatcher，请像往常同样执行此操做。

dispatch({ type: TOGGLE, payload: 'My payload' })
复制代码

总结

恭喜！ 您成功地从类重构为使用 hooks。 为了确保一切正常工做，让咱们再测试一次 toggle。

是的，一切正常。源码 如今您已经了解了 hooks 的基础知识并使用了 hooks 与redux ，我建议您阅读文档以深刻了解这些概念。

此外，我建议阅读 Functional React: Quickstart with React Hooks, Redux and MobX 一书，深刻了解 Redux、React 和 MobX。

关注咱们

IMWeb 团队隶属腾讯公司，是国内最专业的前端团队之一。

咱们专一前端领域多年，负责过 QQ 资料、QQ 注册、QQ 群等亿级业务。目前聚焦于在线教育领域，精心打磨 腾讯课堂、企鹅辅导 及 ABCMouse 三大产品。

社区官网：

imweb.io/

加入咱们：

careers.tencent.com/jobdesc.htm…

扫码关注 IMWeb前端社区公众号，获取最新前端好文

微博、掘金、Github、知乎可搜索 IMWeb或 IMWeb团队关注咱们。