RTK查询结果如何使用localStorage？答案

【问题标题】：How to use RTK query result with localStorage?RTK查询结果如何使用localStorage？
【发布时间】：2022-12-23 06:08:03
【问题描述】：

我使用 createApi Fn 创建了一个 api 端点。我需要将响应数据存储在 localStorage 中一段时间，然后从 LS 获取它而不是发出请求。当计时器结束时，使用 useQuery 更新数据。

export const geoApi = createApi({
    reducerPath: 'geoApi',
    baseQuery: fetchBaseQuery({ baseUrl: GEO_URL }),
    endpoints: (builder) => ({
        getData: builder.query<any, void>({
            query: () => 'geo-data',
        }),
    }),
});

export const { useGetDataQuery } = geoApi;

我可以做到的内部组件逻辑（伪代码）：

let geoData = null;
const cachedData = ls.get('GEO_DATA');

if (cachedData && dataIsUpToDate()) {
  geoData = cachedData;
} else {
  const res = useGetDataQuery();

  geoData = res.data;
  updateCachedData(geoData);
}

但我想在 redux 存储逻辑中进行。

【问题讨论】：

您好，您找到解决方案了吗？帮我
@Becauseihatmyself 不:(

标签： reactjs redux react-redux redux-toolkit

【解决方案1】：

一段时间后，我建议使用钩子（根据你的情况修改它）：

function useCachedData(key: string, ttl: number = Infinity, query: () => Promise<void>) {
    const [trigger] = query();
    const [cache, updateCache] = useState();

    const refreshCache = async () => {
        const fetched = await trigger();

        localStorage.setItem(key, JSON.stringify({ at: Date.now(), data: fetched.data });

        updateCache(fetched.data);
    }

    useEffect(() => {
        let isCached = false;
        const cached = localStorage.getItem(key);

        if (cached) {
            const { at, data } = JSON.parse(cached);

            if (at + ttl > Date.now()) {
                updateCache(data);
                isCached = true;
            }
        }

        if (!isCached) {
            refreshCache();
        }
    }, []);

    return data;
}

和lazy query的用法：

// ...component logic
const geoData = useCachedData('GEO_DATA', 60 * 1000, () => useLazyQuery());

【讨论】：