在Remix.run中实现组件随独立状态变更重渲染的方案咨询

针对你在Remix中需要跨组件监听状态变更的需求，这里提供几个优雅的解决方案，替代强制重渲染或localStorage的临时方案：

1. 利用Remix原生Loader/Action + useRevalidator #

Remix的核心设计围绕路由数据同步展开，你可以将共享状态存储在服务器端session中，通过Loader读取、Action更新，并借助useRevalidator触发组件更新：

• 在路由文件中定义Loader函数，从session读取共享状态并返回
• 用Action函数处理状态更新请求，修改session后返回响应
• 监听状态的组件通过useLoaderData获取数据，状态变更时调用useRevalidator的revalidate方法触发重新加载，所有依赖该Loader数据的组件都会自动更新

示例代码：

// 路由文件（如routes/_index.tsx）
import { json } from "@remix-run/node";
import { getSession, commitSession } from "~/utils/session"; // 需提前配置session

export async function loader({ request }) {
  const session = await getSession(request.headers.get("Cookie"));
  return json({ sharedState: session.get("sharedState") || "初始值" });
}

export async function action({ request }) {
  const formData = await request.formData();
  const newState = formData.get("newState");
  const session = await getSession(request.headers.get("Cookie"));
  
  session.set("sharedState", newState);
  return json(
    { success: true },
    { headers: { "Set-Cookie": await commitSession(session) } }
  );
}

// 监听状态的组件
import { useLoaderData, useRevalidator } from "@remix-run/react";

function StateWatcher() {
  const { sharedState } = useLoaderData();
  const { revalidate } = useRevalidator();

  const updateState = async (newValue) => {
    const formData = new FormData();
    formData.append("newState", newValue);
    
    await fetch("/", { method: "POST", body: formData });
    revalidate();
  };

  return (
    <div>
      <p>当前状态：{sharedState}</p>
      <button onClick={() => updateState("更新后的值")}>更新状态</button>
    </div>
  );
}

2. 自定义React Context + useReducer实现客户端状态管理 #

如果不需要服务器端同步，仅需客户端跨组件共享状态，可以自己实现类似Redux的轻量状态管理：

• 创建一个Context，使用useReducer管理状态逻辑
• 在Remix的根组件（app/root.tsx）中用Context.Provider包裹整个应用
• 任意组件通过自定义Hook获取状态和dispatch方法，状态变更时所有订阅组件自动重渲染

示例代码：

// app/contexts/SharedStateContext.tsx
import { createContext, useContext, useReducer } from "react";

const initialState = { value: "" };

function sharedStateReducer(state, action) {
  switch (action.type) {
    case "UPDATE_VALUE":
      return { ...state, value: action.payload };
    default:
      return state;
  }
}

const SharedStateContext = createContext(null);

export function SharedStateProvider({ children }) {
  const [state, dispatch] = useReducer(sharedStateReducer, initialState);
  return (
    <SharedStateContext.Provider value={{ state, dispatch }}>
      {children}
    </SharedStateContext.Provider>
  );
}

export function useSharedState() {
  const context = useContext(SharedStateContext);
  if (!context) throw new Error("useSharedState必须在SharedStateProvider内使用");
  return context;
}

// 在app/root.tsx中注入Provider
import { Outlet } from "@remix-run/react";
import { SharedStateProvider } from "~/contexts/SharedStateContext";

export default function App() {
  return (
    <html>
      <body>
        <SharedStateProvider>
          <Outlet />
        </SharedStateProvider>
      </body>
    </html>
  );
}

// 任意组件中使用状态
import { useSharedState } from "~/contexts/SharedStateContext";

function ComponentA() {
  const { state, dispatch } = useSharedState();
  return (
    <div>
      <p>ComponentA 显示：{state.value}</p>
      <button onClick={() => dispatch({ type: "UPDATE_VALUE", payload: "新状态" })}>
        修改状态
      </button>
    </div>
  );
}

function ComponentB() {
  const { state } = useSharedState();
  return <div>ComponentB 显示：{state.value}</div>;
}

3. 直接集成Redux（兼容Remix） #

如果你习惯Redux的用法，Remix完全支持集成Redux，无需修改核心逻辑：

• 安装redux和react-redux依赖
• 按照纯React项目的方式配置Redux Store
• 在app/root.tsx中用Redux的Provider包裹应用
• 组件中正常使用useSelector和useDispatch，和纯React项目完全一致

这种方式可以直接复用你之前的Redux代码，无缝迁移到Remix项目中。

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