如何有效地用 react-query 缓存替换 redux like store？

Question

我正在使用 useQuery 获取电影列表，之前我使用 redux 来存储这些电影并且我有一个搜索功能，当我搜索时我在商店里寻找电影。现在我正在尝试使用 react-query 将其替换为电影查询的缓存结果：

    const queryClient=useQueryClient();
    let queryClientPopular=queryClient.getQueryData('Popular')?.data?.results;
    let queryClientUpcoming=queryClient.getQueryData('Upcoming')?.data?.results;
    let queryClientTopRated=queryClient.getQueryData('Top Rated')?.data?.results;
    
    const getMovieIdForPlaceholderData=(queryClientMovies,query)=>{
        return queryClientMovies?.filter(movie=>movie.original_title.toLowerCase().startsWith(query));
     }
     
     const filterMovies=(query)=>{
        let dataQuery;
        let queryClientArr=[queryClientPopular,queryClientTopRated,queryClientUpcoming];
            
        for(let i=0;i<3;i++){
            dataQuery=getMovieIdForPlaceholderData(queryClientArr[i],query)
            if(dataQuery)break;
        }
    
        
        //let arr=globalState?.movie?.filter(mov=> {return mov.original_title.toLowerCase().startsWith(query)});
        //console.log(arr);
        setFilteredMovies(dataQuery);       
    }

我有两个顾虑：

我觉得代码很乱很乱
如果用户刷新我会丢失查询缓存数据对于这个问题，我想过使用 useQuery 重新获取电影，以便我可以搜索它们。但是好像效率很低

有没有更好的方法来解决这些问题？或者我应该坚持使用我的 Redux 商店吗？

Answer 1

React Query 旨在缓存服务器响应，而不是让您在本地“搜索”。这里的基本逻辑是，在某些时候服务器将保存如此多的数据，以至于您无法将所有数据传递给客户端以在那里进行搜索 - 因此您应该只向服务器请求所有内容。

这在大多数情况下都可以正常工作，甚至在 Redux Toolkit 中，我们也有类似的方法 RTK Query。

如果您发现自己手动摆弄结果以创建新内容，那么它可能不适合您。那些“查询”库是文档缓存，而不是规范化缓存。它们非常适合“镜像服务器”，但不适合“本地处理数据”。如果你想做后者，你可能必须继续手动管理你的状态。

如何有效地用 react-query 缓存替换 redux like store？

How to replace redux like store with react-query cache efficiently?

reactjs

redux

react-query