[译]如何结合React Hooks来使用Redux
转载自:https://juejin.cn/post/6844903955739197447
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。