データの監視と統計には React Query とデータベースを使用する

データの監視と統計に React Query とデータベースを使用する

インターネットの急速な発展に伴い、データの監視と統計は多くのアプリケーションにとって不可欠な部分になりました。ユーザーの行動をより深く理解し、ユーザーエクスペリエンスを最適化し、データに基づいた意思決定を行うために、多くの場合、それに応じてデータを収集、保存、分析する必要があります。この記事では、React Query とデータベースを使用してデータの監視と統計を行う方法を紹介します。

React Query は、React アプリケーションのデータ状態とリクエストをより適切に管理するのに役立つ強力なデータ管理ライブラリです。従来の Redux や Mobx とは異なり、React Query の設計コンセプトは、データ操作と状態管理をライブラリに引き渡すことで、ビジネス ロジックの作成に集中できるようになります。

始める前に、まずこのシナリオを理解しましょう。電子商取引 Web サイトを開発していて、各アイテムの売上をカウントし、後の分析のためにデータをデータベースに保存できるようにしたいとします。 React Queryを使用して商品データの取得・更新操作を管理します。

まず、React Query をインストールする必要があります:

npm install react-query

次に、Product という名前のコンポーネントを作成し、React Query 関連のフックをインポートします:

import React from "react";
import { useQuery, useMutation } from "react-query";

useQuery フックを使用して商品リスト データを取得し、useMutation フックを使用して商品販売データを更新します。

以下は製品リスト データを取得するサンプル コードです:

const fetchProducts = async () => {
  const response = await fetch("/api/products");
  const data = await response.json();
  return data;
};

const Product = () => {
  const { data, isLoading, isError } = useQuery("products", fetchProducts);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error...</div>;
  }

  return (
    <div>
      {data.map((product) => (
        <div key={product.id}>
          <span>{product.name}</span>
          <span>{product.price}</span>
        </div>
      ))}
    </div>
  );
};

上記のコードでは、サーバー リストから製品を取得するために fetchProducts という名前の非同期関数を定義します。データ。次に、useQuery フックを使用してデータを取得し、リクエストのステータスに基づいてレンダリングします。

次に、製品販売データを更新するメソッドを定義する必要があります。たとえば、ユーザーが商品を購入するときに、このメソッドを呼び出してデータベース内の販売数量を更新します。以下は、製品販売データを更新するためのサンプル コードです。

const updateProductSales = async (productId) => {
  const response = await fetch(`/api/products/${productId}/sales`, {
    method: "POST",
  });
  const data = await response.json();
  return data;
};

const Product = () => {
  // ...

  const mutation = useMutation(updateProductSales);

  const handlePurchase = (productId) => {
    mutation.mutate(productId);
  };

  return (
    <div>
      {data.map((product) => (
        <div key={product.id}>
          <span>{product.name}</span>
          <span>{product.price}</span>
          <button onClick={() => handlePurchase(product.id)}>Purchase</button>
        </div>
      ))}
    </div>
  );
};

上記のコードでは、製品販売データを更新するための updateProductSales という名前の非同期関数を定義します。次に、useMutation フックを使用してミューテーションを作成し、mutation.mutate メソッドを通じて更新操作をトリガーします。

最後に、ボタンを通じて handlePurchase メソッドをトリガーし、製品販売データを更新します。

上記のコード例を通じて、データの監視と統計に React Query とデータベースを使用するプロセス全体を確認できます。 useQuery フックを通じてデータを取得し、useMutation フックを通じてデータを更新して、データの監視と統計機能を実現します。

もちろん、上記は単なる例であり、実際のアプリケーション シナリオはより複雑になる可能性があります。ただし、React Query を使用すると、データの状態とリクエストをより適切に管理できるようになり、アプリケーションの保守と拡張が容易になります。

この記事が、データの監視と統計に React Query とデータベースを使用する方法を理解するのに役立つことを願っています。

以上がデータの監視と統計には React Query とデータベースを使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。