在 Remix.run 中调用操作后，加载程序和操作之间的共享对象不会更新？

【问题标题】：Shared object between loader & action does not update after action is called in Remix.run?在 Remix.run 中调用操作后，加载程序和操作之间的共享对象不会更新？
【发布时间】：2022-10-21 01:29:55
【问题描述】：

我有一个模拟数据库，用于玩一些加载器和操作。

这是粗略的布局：

const db = { key: "bar" }

export const action = async ({ request }) => {
     db.key = "foo"
}

export const loader = async ({ request }) => {
    return json(db)
}

我有一个问题。调用该操作时，它成功更新了db.key，但是随后调用了加载程序，其值为{key: "bar" }。有谁知道为什么再次调用加载程序时对象没有更新？

【问题讨论】：

标签： remix.run

【解决方案1】：

我认为这与"Data Writes" 主题有关。每当提交表单时，它都会重新加载页面上所有路由的所有数据。这就是为什么许多人会使用像 redux 这样的全局状态管理库。

我不知道它是否有帮助，但在这里我有一个简单的方法，您可以发送一个发布请求，使用操作更新它并使用加载器在 URL 处加载内容搜索。

export const action: ActionFunction = async ({ request }) => {
  const form = await request.formData();
  const key = form.get("key");
  return redirect(`/?key=${key}_updated`);
};

export const loader: LoaderFunction = async ({ request }: any) => {
  const url = new URL(request.url);
  const key = url.searchParams.get("key");
  return json({ key });
};

export default function Index() {
  const loaderData = useLoaderData();
    
  return (
    <div>
      <span>loaderData: {loaderData.key}</span>
      <Form method="post">
        <input type="text" id="key" name="key" defaultValue={loaderData.key} />
        <button>Submit</button>
      </Form>
    </div>
  );
}

【讨论】：