React-redux+Typescript项目——Hooks中useStore、useDispatch和useSelector的基础介绍和使用,以及两者替代connect

在react中，有容器组件和UI组件之分，在React Hooks出现之前，UI组件我们可以使用函数，无状态组件来展示UI，而对于容器组件，函数组件就无能为力，我们依赖类组件来获取数据处理数据，并向下传递参数给UI组件进行渲染。使用React Hooks相比从前的类组件有一下几个好处：

1.代码可读性更强，原本同一块功能的代码逻辑被拆分到不同的生命周期函数中，容易使开发者不利于维护和迭代，通过React Hooks可以讲功能代码聚合，方便阅读维护。

2.组件树层级变浅（子组件即UI组件可自己编写，但父组件即容器组件必须使用connect（）（）创建并暴露），在原本的代码中，我们经常用HOC/render props等方式来服用组件等状态，增加功能等，无疑增加了组件树层数及渲染，而在React Hooks中，这些功能都可以通过强大的Hooks实现（不用connect（）（）再创建容器组件）

 

让我们通过下面的项目练习，了解useStore、useDispatch和useSelector的使用。最后有总结

需求：

 项目结构：用hooks就不用建这个文件

 count.tsx文件：

import { Select } from "antd";
import React, { useEffect } from "react";
import { useState } from "react";
import { FC } from "react";
import {
  decrementAction,
  incrementAction,
  incrementAsyncAction,
} from "../redux/action";
import store from "../redux/store";
import { useStore, useDispatch, useSelector } from "react-redux";
import { ActionType } from "../types/actionTypes";

interface Props {
  count: number;
}
// 不用useSelector和useDispatch需用Props
// const CountUI: FC<Props> = (props) => {
const CountUI: FC = () => {
  const [selectNumber, setSelectNumber] = useState<number>(1);
  /*一个store可以有多个countReducer。
   store中的getState（）方法调用可以得到store里的状态，
   与useSelector不同的是需要监听状态变化手动更新视图，useSelector则是自动更新视图，
   useSelector传入的函数可以加工数据，预处理数据，所有逻辑就在reducer里面处理，降低耦合度
   const count = useStore<any>().getState().countReducer
   */
  const count = useSelector((state: any) => state.countReducer);
  const myDispatch = useDispatch<any>();

  const increment = () => {
    myDispatch({ type: ActionType.Increment, data: selectN