Pemantauan data dan statistik menggunakan React Query dan pangkalan data

Menggunakan React Query dan pangkalan data untuk pemantauan dan statistik data

Dengan perkembangan pesat Internet, pemantauan dan statistik data telah menjadi banyak aplikasi sebahagian daripada. Untuk lebih memahami tingkah laku pengguna, mengoptimumkan pengalaman pengguna dan membuat keputusan berdasarkan data, kami selalunya perlu mengumpul, menyimpan dan menganalisis data dengan sewajarnya. Dalam artikel ini, saya akan memperkenalkan cara menggunakan React Query dan pangkalan data untuk pemantauan dan statistik data.

React Query ialah perpustakaan pengurusan data yang berkuasa yang membantu kami mengurus keadaan data dan permintaan dengan lebih baik dalam aplikasi React. Tidak seperti Redux atau Mobx tradisional, konsep reka bentuk React Query adalah untuk menyerahkan manipulasi data dan pengurusan keadaan kepada pustaka, membolehkan kami memberi tumpuan yang lebih baik pada penulisan logik perniagaan.

Sebelum kita mula, mari kita fahami senario ini dahulu: Katakan kita sedang membangunkan laman web e-dagang, dan kami berharap dapat mengira jualan setiap item dan menyimpan data dalam pangkalan data untuk seterusnya gunakan analisis. Kami akan menggunakan React Query untuk mengurus operasi pemerolehan dan kemas kini data produk.

Pertama, kami perlu memasang React Query:

npm install react-query

Seterusnya, kami mencipta komponen bernama Product dan import cangkuk berkaitan React Query: #🎜 🎜#

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

Product 的组件，并导入 React Query 相关的 hook：

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>
  );
};

我们使用 useQuery hook 来获取商品列表数据，并使用 useMutation hook 来更新商品销售数据。

下面是获取商品列表数据的示例代码：

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>
  );
};

以上代码中，我们定义了一个名为 fetchProducts 的异步函数，用于从服务器获取商品列表数据。然后，我们使用 useQuery hook 来获取数据，并根据请求状态进行相应的渲染。

接下来，我们需要定义一个用于更新商品销售数据的方法。例如，当用户购买某个商品时，我们将调用这个方法来更新数据库中的销售数量。下面是一个更新商品销售数据的示例代码：

rrreee

在以上代码中，我们定义了一个名为 updateProductSales 的异步函数，用于更新商品销售数据。然后，我们使用 useMutation hook 来创建一个 mutation，并通过 mutation.mutate 方法来触发更新操作。

最后，我们通过一个按钮来触发 handlePurchase 方法，从而更新商品销售数据。

通过以上代码示例，我们可以看到使用 React Query 和数据库进行数据监控和统计的整个流程。我们通过 useQuery hook 来获取数据，并通过 useMutationKami menggunakan cangkuk useQuery untuk mendapatkan data senarai produk dan menggunakan cangkuk useMutation untuk mengemas kini data jualan produk.

Berikut ialah contoh kod untuk mendapatkan data senarai produk:

rrreee

Dalam kod di atas, kami mentakrifkan fungsi tak segerak bernama fetchProducts, menggunakan Dapatkan data senarai produk daripada pelayan. Kemudian, kami menggunakan cangkuk useQuery untuk mendapatkan data dan memaparkan dengan sewajarnya berdasarkan status permintaan.

#🎜🎜#Seterusnya, kita perlu menentukan kaedah untuk mengemas kini data jualan produk. Sebagai contoh, apabila pengguna membeli item, kami akan memanggil kaedah ini untuk mengemas kini kuantiti jualan dalam pangkalan data. Berikut ialah contoh kod untuk mengemas kini data jualan produk: #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami mentakrifkan fungsi tak segerak bernama updateProductSales untuk mengemas kini data jualan produk. Kemudian, kami menggunakan cangkuk useMutation untuk membuat mutasi dan mencetuskan operasi kemas kini melalui kaedah mutation.mutate. #🎜🎜##🎜🎜#Akhir sekali, kami mencetuskan kaedah handlePurchase melalui butang untuk mengemas kini data jualan produk. #🎜🎜##🎜🎜#Melalui contoh kod di atas, kita dapat melihat keseluruhan proses menggunakan React Query dan pangkalan data untuk pemantauan dan statistik data. Kami memperoleh data melalui cangkuk useQuery dan mengemas kini data melalui cangkuk useMutation untuk mencapai fungsi pemantauan dan statistik data. #🎜🎜##🎜🎜# Sudah tentu, perkara di atas hanyalah contoh mudah, dan senario aplikasi sebenar mungkin lebih kompleks. Walau bagaimanapun, menggunakan React Query membantu kami mengurus keadaan data dan permintaan dengan lebih baik, menjadikan aplikasi lebih mudah untuk diselenggara dan skala. #🎜🎜##🎜🎜# Saya harap artikel ini akan membantu anda memahami cara menggunakan React Query dan pangkalan data untuk pemantauan dan statistik data! #🎜🎜#

Atas ialah kandungan terperinci Pemantauan data dan statistik menggunakan React Query dan pangkalan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!