UpstashRedisをRemixで使用する

データがどのように読み込まれるかを見てきましたが、この段階では、機能フラグデータベースに実際には機能がありません。ここでフォームアクションが機能します。 actionという名前の関数をエクスポートすることにより、Remixでデータが処理されます。 。 loaderによく似ています 、これはサーバー上で実行され、通常はjsonを返します Reactコンポーネントが別のフックを介してアクセスできるデータ、またはブラウザにredirectするように指示できるデータ 別のページに移動します。

action 以下の関数は、実際には、機能の作成、機能の有効化/無効化、および機能の削除という4つの異なるタイプのアクションを処理します。これはswitchで処理します 次に、適切なRedis関数/コマンドを呼び出すステートメント。

export const action: ActionFunction = async ({ request }) => {
  // You would want to add authentication/authorization here
  const formData = await request.formData();
  const feature = formData.get("feature") as string;
  const action = formData.get("_action") as string;

  if (!feature || feature.length === 0) {
    // This isn't currently displayed in our component
    return json({ error: "Please provide a feature" });
  }

  switch (action) {
    case "create":
    case "enable":
      await redis.hset("features", { [feature]: 1 });
      break;
    case "disable":
      await redis.hset("features", { [feature]: 0 });
      break;
    case "delete":
      await redis.hdel("features", feature);
      break;
  }

  return redirect("/features");
};

成功すると、ユーザーが現在表示しているのと同じページにリダイレクトすることに気付くでしょう。これは基本的にページのリロードをトリガーし、loaderを呼び出します 機能し、ユーザーに表示される内容を更新します。

新しい機能フラグを追加するには、AddFeature コンポーネントはRemixFormを使用します 上記のアクション関数にデータを送信するコンポーネント。 post経由で送信するように指定しました メソッドとreplaceも提供しました 機能フラグを作成するたびにブラウザの履歴に新しいページが追加されないようにするための小道具。

const AddFeature = () => {
  return (
    <Form method="post" replace>
      <input type="hidden" name="_action" value="create" />
      <input type="text" name="feature" required placeholder="name" />
      <button type="submit">Add</button>
    </Form>
  );
};

機能が作成されたら、管理できるように現在のすべての機能フラグを表示する必要があります。各機能フラグには、実際には2つの形式が表示されます。1つは機能フラグを有効/無効にするためのもので、もう1つは機能フラグを削除するためのものです。

_actionという2つの非表示フィールドがあることに注意してください。 action functionは、機能に対して何をしようとしているのか、およびfeatureを認識しています。 変更するフラグ名を送信します。

const FeatureList = () => {
  const { features } = useLoaderData<LoaderData>();

  return (
    <ul>
      {features.map(([feature, active]) => (
        <li key={feature}>
          <Form method="post" replace>
            <input
              type="hidden"
              name="_action"
              value={active ? "disable" : "enable"}
            />
            <input type="hidden" name="feature" value={feature} />
            <button type="submit" className="btn-naked">
              {active ? "💪" : "🦾"}
            </button>
          </Form>

          <span>{feature}</span>

          <Form method="post" replace>
            <input type="hidden" name="_action" value="delete" />
            <input type="hidden" name="feature" value={feature} />
            <button type="submit">Delete</button>
          </Form>
        </li>
      ))}
    </ul>
  );
};

type LoaderData = {
  features: Record<string, boolean>;
};

const loadFeatures = async (keys: Array<string>) => {
  const data = await redis.hmget("features", ...keys);

  const features = keys.reduce<Record<string, boolean>>((acc, key, index) => {
    acc[key] = data[index] === "1";
    return acc;
  }, {});

  return features;
};

export const loader: LoaderFunction = async (): Promise<LoaderData> => {
  const features = await loadFeatures(["chart", "graph"]);
  return { features };
};

export default function Index() {
  const { features } = useLoaderData<LoaderData>();

  return (
    <div>
      <h1>Dashboard</h1>
      {features.chart ? <h2>Chart</h2> : <h2>No Chart</h2>}
      {features.graph ? <h2>Graph</h2> : <h2>No Graph</h2>}
    </div>
  );
}