怎样适应从手动请求数据到使用 hook 请求库的思维转换？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 981 天前的主题，其中的信息可能已经有所发展或是发生改变。

之前一直维护的老项目还是用的 class component + redux 标准流程就是进入系统的时候把一堆要加载的东西手动发请求，在 promise.all 里收集好并放到 redux 以后才开始真正 render ，需要取数据就用 connect 的方式取，更新也是放在生命周期方法里比如进到某个组件的时候手动更新一次，或者点击操作触发一次更新

一个页面或者一个独立的功能区块用一个专门管理状态的组件负责发一些页面内专用数据的请求以及 connect 到 store 取一些东西，然后和状态相关的操作都放在这个组件里进行，其他尽量都用无状态组件

而 hook 请求库一般是怎么写的？是尽量全用 hook 请求，还是说只有通用的数据采用 hooks 管理？感觉从手动挡一下换到自动的有点手足无措了

请求

hook

组件

Redux

3 条回复 • 2022-04-22 05:27:34 +08:00

ragnaroks

2022-03-28 11:09:04 +08:00

如果你想模糊拉取的数据和本身的状态之间的界限，可以看看 SWR

我个人还是用状态管理，手动请求数据，这里有一个 hook 形式的例子 https://gist.github.com/ragnaroks/aac4dbe578bcd995cc2c939eb04ffe6e

/* app.tsx */

import useClientAddress from 'requests/useClientAddress.ts';

export default function App () : JSX.Element {
const {fetching,ipAddress,error} = useClientAddress();

if(fetching){return <Spinner />;}
if(!!error){return <Exception message={error as string} />;}
return <DataPanel>
<DataItem title="IP 地址" content={ipAddress} />
</DataPanel>;
}

jjwjiang

2022-04-07 16:12:02 +08:00

个人一个最简单的模式

`function useApiQuery<T>(endpoint: string): [T | undefined, any, boolean, (parameter?: any) => void] {
const env = useEnv();
const [data, setData] = useState<T>();
const [error, setError] = useState();
const [loading, setLoading] = useState(true);
const trigger = (parameter: any | ((parameter: any) => any)) => {
const parameters = parameter instanceof Function ? parameter() : parameter;
setLoading(true);
axios.get(endpoint, { params: parameters })
.then(res => {
setData(res.data);
setLoading(false);
}).catch(err => {
setError(err);
setLoading(false);
});
};
return [data, error, loading, trigger];
}`

hooks 里自带状态，所以如果你真的需要管理请求数据的状态可以在这个 hook 里管理，或者再用另一个 hook 来专门管理并且协调 query 的 hook

yukinotech

2022-04-22 05:27:34 +08:00

为啥要用 hook 发请求呢？像 useSWR 看起来很优雅，一方面 post 请求不适合 useSWR ，另一方面因为是自定义 hook ，请求的返回值必须在组件内使用。而且 useSWR 自身也是知道声明式的局限性，还是提供了命令式的执行方式。绕了一圈又回去了。。

比如说有一个用户点击后可以刷新数据的场景，useSWR 请求的参数（查询的参数和分页的信息）没变，但是对应的数据可能在后端已经更新了。useSWR 就显得很僵硬，只能依赖另一个手动指定的变量来触发更新。

就像楼上说的，直接搞一个状态管理，在 action 里面发请求，修改 store ，然后组件通过状态管理提供的 hook 就拿到 store ，比如 redux 的 useSelector 之类的。

最后夹带一点私货。推荐一个状态管理库 https://github.com/bytedance/react-model 真的好用