前言
redux的经典使用方式就是通过高阶组件connect来将组件和store关联起来,我们见过最多的场景也是connect和类组件的组合使用(也可以和函数组件配合使用)。但在拥抱hooks的今天,我们如何抛弃connect,通过hooks获取到状态和dispatch呢?
react-redux中的hook
在react-redux7.1版本之后(如果你的版本比较低又不能升级版本,可以忽略本文)正式推出了三个hook: useDispatch
, useSelector
和useStore
。这些hooks分别用于获取dispatch
, 获取状态
和获取store对象
。接下来我们来对比一下之前的写法和hook的写法。
1. connect版
import actions from 'xxx';
class Foo extends React.Component {
componentDidMount() {
const {
dispatch } = this.props;
dispatch(getData()); // 请求数据
}
renderData() {
const {
data } = this.props; // 获取数据
return (
...
)
}