Javascript 使用挂钩获取数据

我很难想出一种最好的方法，只从API中获取一次数据（当它第一次被请求时），然后存储结果以供重用和/或其他组件函数。下面是一个使用

useContext

和

useReducer

的工作示例，但是对于这样一个“简单”的任务来说，它相当复杂

有更好的方法吗？对于大量的API调用，最好的实现方法是什么。如有任何建议，我们将不胜感激

从“React”导入React；
从“react dom”导入react dom；
从“axios”导入axios；
常量初始状态={
项目：[]，
条目加载：false
};
常量动作={
获取项目：“获取项目”，
已提取的项目：“已提取的项目”
};
const reducer=（状态、操作）=>{
开关（动作类型）{
case actions.FETCHING_项目：
返回{…状态，itemsLoading:true，items:{}；
case actions.FETCHED_项目：
返回{…状态，项：action.value}；
违约：
返回状态；
}
};
const Context=React.createContext（）；
常量提供程序=（{children}）=>{
const[state，dispatch]=React.useReducer（reducer，initialState）；
常量值={
项目：state.items，
itemsLoading:state.itemsLoading，
fetchItems:（）=>{
如果（！state.itemsLoading）{
分派（{type:actions.FETCHING_ITEMS}）；
axios
.get（“https://jsonplaceholder.typicode.com/todos")
.然后（功能（响应）{
分派（{type:actions.FETCHED_ITEMS，value:response.data}）；
});
}
}
};
返回{children}；
};
常量过滤器=（）=>{
const{items，fetchItems}=React.useContext（Context）；
React.useffect（（）=>{
fetchItems（）；
}，[fetchItems]）；
const listItems=items.length
？items.map（item=>{
返回
{item.title}
；
})
: "";
返回(
{listItems}
);
};
常量应用=（）=>{
返回(
);
};
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);
我想您可以使用-

const identity=x=>x
const useAsync=（runAsync=identity，deps=[]）=>{
常量[loading，setLoading]=useState（true）
const[error，setError]=useState（null）
const[result，setResult]=useState（null）
useEffect（=>{
解析（runAsync（…deps））
.then（设置结果、设置错误）
.finally（=>setLoading（false））
}，副署长）
返回{加载，错误，结果}
}

你很兴奋，所以你马上就开始使用它-

constmycomponent=（）=>{
常量{正在加载，错误，结果：items}=
UseAncync（\uUx=>{
get（“path/to/json”）
.then（res=>res.json（））
}, ...)
// ...
}

但到此为止。在需要时编写更多有用的钩子-

const fetchJson = (url) =>
  axios.get(url).then(r => r.json())

const useJson = (url) =>
  useAsync(fetchJson, [url])

const MyComponent = () => {
  const { loading, error, result:items } =
    useJson("path/to/json")

  if (loading)
    return <p>Loading...</p>

  if (error)
    return <p>Error: {error.message}</p>

  return <div><Items items={items} /></div>
}

const fetchJson=（url）=>
get（url）.then（r=>r.json（））
const useJson=（url）=>
UseAncy（fetchJson，[url]）
常量MyComponent=（）=>{
常量{正在加载，错误，结果：items}=
useJson（“path/to/json”）
如果（装载）
返回加载

如果（错误）
返回错误：{Error.message}

返回
}

仅当依赖项更改时，才会重新运行效果。但是，如果你希望有更昂贵的查询，你希望用更精细的控制来处理，那么查看和.< /p>为什么你会考虑这个复杂的问题？@ SubHaMk哈特里，我很难想象这种方法在一个真实世界的应用程序中有多个资源需要被加载和“缓存”（因为没有更好的单词）用于将来的重用。我应该将所有数据保存在一个上下文中，并为不同的操作组合多个还原器。您可以实现多个上下文以使用多个还原器，也可以实现一个上下文以组合多个还原器。第二种方法类似于处理多个资源和缓存的类redux解决方案。