【译】如何结合React Hooks来使用Redux

原创

mb5ff980f81f3d8 2021-01-09 20:59:30 ©著作权

文章标签 java 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者mb5ff980f81f3d8的原创作品，请联系作者获取转载授权，否则将追究法律责任

本文由 IMWeb 首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。

原文地址：https://itnext.io/how-to-use-redux-with-react-hooks-5422a7ceae6e

React-redux(https://github.com/reduxjs/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是一个布尔值。

【译】如何结合React Hooks来使用Redux_java

用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属性。可以肯定的是，切换仍然按预期工作。

【译】如何结合React Hooks来使用Redux_java

Hooks 通常使用 use 关键字作前缀，比如 useState 或 useSelecor。

我们目前从 store 读取状态的方法是通过 mapStateToProps 并将函数组件封装在 connectHOC中。

第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 包导入 useDispatchhook。

使用 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。

【译】如何结合React Hooks来使用Redux_java_03

是的，一切正常。源码(https://codesandbox.io/s/react-redux-hook-by-indrek-lasn-utc6h)现在您已经了解了 hooks 的基础知识并使用了 hooks 与redux ，我建议您阅读文档(https://react-redux.js.org/api/hooks)以深入了解这些概念。

此外，我建议阅读 Functional React: Quickstart with React Hooks, Redux and MobX(https://amzn.to/2T07zrK) 一书，深入了解 Redux、React 和 MobX。