封装自定义Hooks发请求并从Redux中拿初值

正常写法

1. 导入useDispatch 和 useEffect 以及 useSelector
2. 在 useEffect中使用 dispatch 发送请求
3. 通过 useSelector 从redux中 获取数据

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getInfo } from '@/store/aciton/xxxx'

export default function App () {
  const dispatch = useDispatch()

  // 1. 发请求
  useEffect(() => {
    // 派发action, 发请求
    dispatch(getInfo())
  }, [])

  // 2. 获取数据
  const xxx = useSelector((state) => state.xxx)
  return <div />
}

通过封装自定义Hooks,简化发请求和获取数据的步骤

import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'

export default function useInitState (actionName, stateName) {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(actionName())
  }, [])

  const state = useSelector((state) => state[stateName])
  return state
}

使用方式

• const xxx = useInitState(action名(),'store分支')

import React from 'react'
import useInitState from '@/hooks/useInitState'

export default function App() {
    const xxx = useInitState(getInfo,'xxxx')
    return (
        <div>
            
        </div>
    )
}