react自定义hooks发请求拿初始应用状态

一.项目情景

        在做前端开发的时候,基本上每个页面都会涉及到向后台发请求拿数据和渲染数据的两个功能,这都是一些重复且没有挑战性的工作,而我在学习react的时候正好又接触到了自定义hooks这个可以达到功能复用的很有趣的知识,就想着自己能不能把这些重复性的功能步骤封装成一个自定义hooks,让自己的开发效率更高,代码写的更优雅.然后就不断的在网上查阅资料和视屏学习,在自己的不懈努力下,终于学会并且能够封装一些简单的自定义hooks达到功能复用的效果,极大的提升了团队的开发效率.

二.封装自定义hooks

import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
// 从redux中获取到的state返回的数据类型
import { RootState } from '@/types/store'

// 函数封装的基本思想：
// 将相同的逻辑直接拷贝到函数中，不同的逻辑通过函数参数传入。
// 需要返回数据，就通过函数返回值返回
// 不同点:分发的 action 函数不同 还有 获取的状态不同,所以把这两个作为自定义hooks的参数
// 相同点:都是为了拿到相应的应用状态,因此,把拿到的应用状态作为返回值
export default function useInitialState<StateName extends keyof RootState> (
  // 分发的 action 函数
  action: () => void,
  // 获取的状态
  stateName: StateName
) {
  // 向redux中获取数据:将所需获取的状态传入相应的state中
  const state = useSelector((state: RootState) => state[stateName])
  // 向redux中存储数据:根