react-redux使用hooks替代connect

前言

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 (
			...
		)
	}