如何在Remix中实现状态管理？组件与路由间数据共享及全局数据处理

一、组件与路由之间共享数据 #

Remix的路由机制原生提供了多种数据共享方案，无需额外复杂配置：

• 通过路由Loader共享数据：所有路由组件（含嵌套路由）可通过useLoaderData()获取当前路由及父路由Loader返回的数据，天然实现路由间的数据互通。

  // 父路由 loader
  export async function loader() {
    return { user: await fetchUser() };
  }
  
  // 子路由组件
  import { useLoaderData } from "@remix-run/react";
  export default function ChildRoute() {
    const { user } = useLoaderData<typeof loader>();
    return <div>当前用户：{user.name}</div>;
  }
  

• 通过Outlet传递数据：若要在路由组件和其渲染的非路由子组件间共享数据，可使用Outlet的context属性传递，子组件通过useOutletContext()接收。

  // 父路由组件
  import { Outlet, useOutletContext } from "@remix-run/react";
  export default function ParentRoute() {
    const [count, setCount] = useState(0);
    return <Outlet context={{ count, setCount }} />;
  }
  
  // 非路由子组件
  export function ChildComponent() {
    const { count, setCount } = useOutletContext<{ count: number; setCount: (n: number) => void }>();
    return <button onClick={() => setCount(count + 1)}>点击次数：{count}</button>;
  }
  

二、全局可访问且支持子组件更新的状态 #

针对跨路由、跨组件的全局状态需求，可采用以下实用方案：

• React Context + useReducer/useState：这是最原生的全局状态方案，在根路由中创建并提供全局Context，所有子组件均可通过useContext访问并更新状态。

  // app/contexts/GlobalContext.tsx
  import { createContext, useContext, useState, ReactNode } from "react";
  
  type GlobalContextType = {
    theme: string;
    setTheme: (theme: string) => void;
  };
  
  const GlobalContext = createContext<GlobalContextType | undefined>(undefined);
  
  export function GlobalProvider({ children }: { children: ReactNode }) {
    const [theme, setTheme] = useState("light");
    return (
      <GlobalContext.Provider value={{ theme, setTheme }}>
        {children}
      </GlobalContext.Provider>
    );
  }
  
  export function useGlobalContext() {
    const context = useContext(GlobalContext);
    if (!context) throw new Error("useGlobalContext必须在GlobalProvider内使用");
    return context;
  }
  

  根路由中包裹：

  // app/root.tsx
  import { GlobalProvider } from "./contexts/GlobalContext";
  export default function App() {
    return (
      <html>
        <body>
          <GlobalProvider>
            <Outlet />
          </GlobalProvider>
        </body>
      </html>
    );
  }
  

  任意组件中使用：

  import { useGlobalContext } from "~/contexts/GlobalContext";
  export function ThemeToggle() {
    const { theme, setTheme } = useGlobalContext();
    return (
      <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
        切换到{theme === "light" ? "深色" : "浅色"}主题
      </button>
    );
  }
  

• 第三方轻量状态库：若状态逻辑复杂（如需要持久化、异步更新），可使用Zustand、Jotai这类库，无需Context包裹，直接通过钩子访问和更新全局状态。
  以Zustand为例：

  // app/store.ts
  import { create } from "zustand";
  
  type GlobalState = {
    user: { name: string } | null;
    setUser: (user: { name: string } | null) => void;
  };
  
  export const useGlobalStore = create<GlobalState>((set) => ({
    user: null,
    setUser: (user) => set({ user }),
  }));
  

  组件中使用：

  import { useGlobalStore } from "~/store";
  export function UserProfile() {
    const user = useGlobalStore((state) => state.user);
    const setUser = useGlobalStore((state) => state.setUser);
    return (
      <div>
        {user ? <p>用户名：{user.name}</p> : <button onClick={() => setUser({ name: "张三" })}>登录</button>}
      </div>
    );
  }
  

• 服务端全局会话状态：若需在服务端和客户端共享全局状态（如用户登录信息），可使用Remix的Session机制，通过Loader和Action读写Session，客户端通过useSession()获取，更新时提交Action修改Session。

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