自定义hooks-逻辑复用-封装useEffect和useSelector

页面加载发请求拿数据存到redux中-再拿回来渲染页面

1. 导入用到的包
2. 将相同的逻辑，直接封装到 useInitState 函数中
3. 将不同的地方，作为 useInitState 函数的参数
4. 将拿到的状态作为 useInitState 函数的返回值

// 逻辑复用--页面加载发请求存到redux中-拿回来渲染
import { RootState } from '@/types/store'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'

// actionName是调用执行dispatch里面的函数，stateNames是拿的值的名字
// 添加类型约束<StateName extends keyof RootState>继承RootState的key
export default function useInitState<StateName extends keyof RootState> (
  actionName: () => void,
  stateNames: StateName
) {
  const dispatch = useDispatch()
  // 通过dispatch调用action里面的对应函数纯到redux里面
  useEffect(() => {
    dispatch(actionName())
  }, [])
  // useSelector在redux里拿stateNames数据
  const state = useSelector((state: RootState) => state[stateNames])

  return state
}

使用：

  const { user } = useInitState(getUser, 'profile')