如何将Redux与React Hooks一起使用

发布于3/8/2020 来自:「前端知否」微信公众号

在本文中,让我们一起来学习如何将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包装":

xxx

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