Zustand with React Query结合示例

"use client"
import React from 'react';
import {useQuery} from "@tanstack/react-query";
import {Button} from "@/components/ui/button";
import {create} from "zustand/index";
type UserStore = {
   filters? : GetUsersFilters
    setFilters: (filters?: GetUsersFilters)=>void
}
const useUserStore = create<UserStore>((set,)=>({
   filters:undefined,
   setFilters: (filters)=>set({filters})
}))
export type GetUsersFilters = {
    limit : number
    page:number
}
const getUser = async (filters?:GetUsersFilters)=>{
      await new Promise((resolve)=>setTimeout(resolve,1000))
                return [{email:"1",name:"jack", filters}]
}
function Page() {
    const {filters} = useUserStore()
    const {data} = useQuery({
        queryKey:["users",filters],
        queryFn :()=>getUser(filters)

    },)
    return (
        <div>
            <FiltersComponent></FiltersComponent>
            {data?.map(({email,name,filters})=>{
                return <div key={name}>{name}{email}{filters?.page}{filters?.limit}</div>;
            })}
        </div>
    );
}
function FiltersComponent (){
    const {setFilters,filters} = useUserStore()
    return <Button onClick={()=>{
        setFilters({
            limit:(filters?.limit ?? 0) +1 ,
            page:(filters?.page ?? 0) +1
        })
    }}>+</Button>
}
export default Page;