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

84 阅读 0 评论 56 点赞

我是靠谱客的博主搞怪小蜜蜂，这篇文章主要介绍封装自定义Hooks发请求并从Redux中拿初值，现在分享给大家，希望可以做个参考。

正常写法

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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,简化发请求和获取数据的步骤

复制代码

1
2
3
4
5
6
7
8
9
10
11
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分支')

复制代码

1
2
3
4
5
6
7
8
9
10
import React from 'react'
import useInitState from '@/hooks/useInitState'
export default function App() {
const xxx = useInitState(getInfo,'xxxx')
return (
<div>
</div>
)
}