Reactjs React Hooks：这种全局状态模式的陷阱？

我开始深入研究钩子，为了更好地理解它们，我尝试在适当的地方为我的应用程序提供全局状态。我遵循了一些教程，但从美学和功能的角度来看，没有任何东西能产生我想要的结果。问题主要源于我的数据来自API端点，所有教程都是用静态数据演示的。我遇到了以下问题，虽然我已经确认它是有效的，但我担心可能会有我没有预料到的陷阱

在尝试将其应用到现实世界的应用程序中之前，我希望你们这些优秀的人能仔细检查一下，让我知道是否有任何突出的反模式。具体地说，我想看看这种模式是否会产生一些不受欢迎的副作用，比如大量加载、无限循环、数据死区等等。一旦缩放

在我的

/store.ts

文件中，我正在创建常规存储上下文：

从“React”导入React；
export const catfactssstore=React.createContext（{state:{}，dispatch:{}）

在

/providers/CatFactsProvider

中，我正在传递状态以及

useReducer

钩子的调度器。

useReducer

将允许我根据状态的当前生命周期设置状态的当前值：

import React，{useReducer}来自“React”
从“../store”导入{catFactsStore}
常量CatFactsProvider:React.FC=（{children}）：JSX.Element=>{
const[state，dispatch]=useReducer(
（状态：任意，动作：任意）=>{
开关（动作类型）{
“装载”案例：
返回{…状态，isLoading:true，hasErrored:false，实体：{}
成功案例：
返回{…状态，isLoading:false，hasErrored:false，entities:action.payload}
案例“错误”：
返回{…状态，isLoading:false，hasErrored:true，errorMessage:action.payload}
违约：
抛出新错误（）
}
},
{实体：{}，isLoading:false，hasErrored:false，errorMessage:'}，
)
返回{children}
}
导出{catFactsStore，CatFactsProvider}

在

index.tsx

中，我正在使用提供商包装我的

App

组件，使其在全球可用

从“React”导入React
从“react dom”导入react dom
从“src/components/App”导入应用程序
从“./providers/CatFactProvider”导入{CatFactsProvider}
ReactDOM.render(
,
document.getElementById（'root'），
)

然后我在

/components/hoc/withCatFacts

中创建一个高阶组件，以发出实际的API请求来检索数据。HOC负责将状态发送到my reducer并提供给其子组件：

import React，{useLayoutEffect，useContext}来自“React”
从“../../store”导入{catFactsStore}
从“axios”导入axios
使用CATFactsProps导出接口{
catFactsState:{entities:{}；isLoading:boolean；hasErrored:boolean；errorMessage:string}
}
导出默认值(
ChildComponent:React.ComponentType
，
)：React.ComponentType=>{
常量CatFactsFetcherHOC:React.FC=（props）：JSX.Element=>{
const{state，dispatch}=useContext（catFactsStore）
//使用LayoutEffect确保在初始渲染之前调度加载
useLayoutEffect（（）=>{
分派（{type:'loading'}）
axios
.get（'https://cat-fact.herokuapp.com/facts')
。然后（（响应）=>{
分派（{type:'success'，payload:response.data.all}）
})
.catch（（e）=>{
分派（{type:'error'，负载：e.message}）
})
}[快讯]）
返回
}
返回CatFactsFetcherHOC（如有）
}

最后，在

/components/App.tsx

文件中，我使用

withCatFacts

包装我的导出，并利用数据在我的应用程序中显示：

从“React”导入React
从“/hoc/withCatFacts”导入withCatFacts，{WithCatFactsProps}
接口道具{}
类型组合道具=道具和CATFactSprops
const-App:React.FC=（{catFactsState}）：JSX.Element=>{
if（catFactsState.isLoading）{
回装
}
如果（catFactsState.hasErrored）{
返回{catFactsState.errorMessage}
}
console.log（catFactsState）//可以成功地看到Cat事实，Huzzah！
返回猫的事实！
}
使用CATFacts导出默认值（应用程序）

如有任何建议或意见，将不胜感激。由于我的钩子知识有限，我不知道我不知道什么，我希望在问题发生之前抓住它们