在Next.js中用Zustand与React Query获取并持久化全局应用参数

你的方案整体完全可行，核心逻辑贴合你提出的四个需求目标，技术选型也和现有技术栈匹配，下面具体拆解分析并给出优化点：

一、核心逻辑的合理性 #

• Zustand+localStorage持久化：用Zustand的persist中间件把应用参数存在localStorage里，完美满足「会话全局可用」和「避免重复请求」的需求，Zustand轻量无依赖的特性也适合这类全局小状态的管理。
• React Query触发请求：通过useQuery的enabled条件（仅当store为空时发起请求），避免了不必要的重复调用；onSuccess回调更新Zustand store的逻辑清晰合理，确保服务端数据同步到全局状态。

二、组件使用的修正与简化 #

你的组件示例存在一处语法错误，同时可以进一步简化代码：

// components/FormWithCities.tsx
"use client";
import React from 'react';
import { useAppParams } from '@/hooks/useAppParams';
import { z } from 'zod';
import { Form } from 'react-hook-form';

export default function FormWithCities() {
  // 直接通过封装好的Hook获取数据，无需单独操作store
  const { regionData } = useAppParams();

  const FormSchema = z.object({
    region: z.string().refine(value => regionData.includes(value), {
      message: 'Invalid region',
    }),
  });
  
  return (
    <Form {...form}>
      {/* Form 内容 */}
    </Form>
  );
}

三、登出清理数据的实现补充 #

当前方案缺少登出时的数据清理逻辑，需要在next-auth的登出流程中添加：

// 示例：在客户端登出处理中清理数据
import { signOut } from 'next-auth/react';
import { useAppParamsStore } from '@/lib/store/appParamsStore';

const handleLogout = async () => {
  // 清除localStorage中的持久化数据
  useAppParamsStore.persist.clearStorage();
  // 重置store状态（可选，视需求而定）
  useAppParamsStore.setState({
    openHours: [],
    banks: [],
    regionData: []
  });
  // 执行next-auth登出
  await signOut();
};

四、额外优化建议 #

1. 合并store更新方法：将多个单独的setXxx方法合并为一个，简化代码：

// lib/store/appParamsStore.ts
type AppParamsState = {
  openHours: string[];
  banks: string[];
  regionData: string[];
  setAppParams: (params: Partial<AppParamsState>) => void;
};

export const useAppParamsStore = create<AppParamsState>(
  persist(
    set => ({
      openHours: [],
      banks: [],
      regionData: [],
      setAppParams: (params) => set(params),
    }),
    {
      name: 'app-params',
      getStorage: () => localStorage
    }
  )
);

这样在useAppParams的onSuccess中可以简化为：

onSuccess: (data) => {
  setAppParams(data);
},

2. 增强React Query配置：由于数据不常变更，可设置staleTime: Infinity让数据永久视为新鲜，避免后台重新请求：

useQuery(
  ['app-params'],
  getProtectedParams,
  {
    enabled: isStoreEmpty,
    staleTime: Infinity, // 数据永久新鲜
    onSuccess: (data) => {
      setAppParams(data);
    },
  }
);

3. 返回加载与错误状态：在useAppParams Hook中加入加载和错误状态，方便组件处理UI：

// hooks/useAppParams.ts
export const useAppParams = () => {
  const { openHours, banks, regionData, setAppParams } = useAppParamsStore();

  const isStoreEmpty = openHours.length === 0 && banks.length === 0 && regionData.length === 0;

  const { isLoading, error } = useQuery(
    ['app-params'],
    getProtectedParams,
    {
      enabled: isStoreEmpty,
      staleTime: Infinity,
      onSuccess: (data) => {
        setAppParams(data);
      },
    }
  );

  return { openHours, banks, regionData, isLoading, error };
};

内容的提问来源于stack exchange，提问作者Sergio