介紹

今天，我將分享如何使用現(xiàn)代 React 模式建立一個(gè)精美的食品資料庫管理系統(tǒng)。我們將專注於建立一個(gè)具有無縫樂觀更新的響應(yīng)式資料表，將 TanStack Query（以前稱為 React Query）的強(qiáng)大功能與 Mantine 的元件庫相結(jié)合。

項(xiàng)目概況

要求

• 在資料表中顯示食品
• 新增項(xiàng)目並立即回饋
• 優(yōu)雅地處理載入和錯(cuò)誤狀態(tài)
• 提供流暢的樂觀更新

技術(shù)堆疊

• TanStack 查詢：伺服器狀態(tài)管理
• Mantine UI：元件庫與表單管理
• Mantine React Table：進(jìn)階表功能
• Wretch：乾淨(jìng)的 API 呼叫
• TypeScript：型別安全

實(shí)施指南

1. 設(shè)立基金會(huì)

首先，讓我們定義我們的類型和 API 配置：

// Types
export type GetAllFoods = {
  id: number;
  name: string;
  category: string;
};

export type CreateNewFoodType = Pick<
  GetAllFoods,
  | 'name'
  | 'category'
>;

// API Configuration
export const API = wretch('<http://localhost:9999>').options({
  credentials: 'include',
  mode: 'cors',
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
});

// TANSTACK QUERY 
export const getFoodOptions = () => {
  return queryOptions({
    queryKey: ['all-foods'],
    queryFn: async () => {
      try {
        return await API.get('/foods')
          .unauthorized(() => {
            console.log('Unauthorized');
          })
          .json<Array<GetAllFoods>>();
      } catch (e) {
        console.log({ e });
        throw e;
      }
    },
  });
};

export const useGetAllFoods = () => {
  return useQuery({
    ...getFoodOptions(),
  });
};

2. 建構(gòu)資料表

使用 Mantine React Table 的表格元件：

const FoodsView = () => {
  const { data } = useGetAllFoods();

  const columns = useMemo<MRT_ColumnDef<GetAllFoods>[]>(
    () => [
      {
        accessorKey: 'id',
        header: 'ID',
      },
      {
        accessorKey: 'name',
        header: 'Name',
      },
      {
        accessorKey: 'category',
        header: 'Category',
      },
      // ... other columns
    ],
    []
  );

  const table = useMantineReactTable({
    columns,
    data: data ?? [],
    // Optimistic update animation
    mantineTableBodyCellProps: ({ row }) => ({
      style: row.original.id < 0 ? {
        animation: 'shimmer-and-pulse 2s infinite',
        background: `linear-gradient(
          110deg,
          transparent 33%,
          rgba(83, 109, 254, 0.2) 50%,
          transparent 67%
        )`,
        backgroundSize: '200% 100%',
        position: 'relative',
      } : undefined,
    }),
  });

  return <MantineReactTable table={table} />;
};

3. 建立表單

用於新增食物的表單組件：

const CreateNewFood = () => {
  const { mutate } = useCreateNewFood();

  const formInputs = [
    { name: 'name', type: 'text' },
    { name: 'category', type: 'text' },
  ];

  const form = useForm<CreateNewFoodType>({
    initialValues: {
      name: '',
      category: '',
      // ... other fields
    },
  });

  return (
    <Box mt="md">
      <form onSubmit={form.onSubmit((data) => mutate(data))}>
        <Flex direction="column" gap="xs">
          {formInputs.map((input) => (
            <TextInput
              key={input.name}
              {...form.getInputProps(input.name)}
              label={input.name}
              tt="uppercase"
              type={input.type}
            />
          ))}
          <Button type="submit" mt="md">
            Create New
          </Button>
        </Flex>
      </form>
    </Box>
  );
};

4. 實(shí)施樂觀更新

我們實(shí)現(xiàn)的核心 - TanStack 查詢突變與樂觀更新：

export const useCreateNewFood = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationKey: ['create-new-food'],
    mutationFn: async (data: CreateNewFoodType) => {
      await new Promise(resolve => setTimeout(resolve, 3000)); // Demo delay
      return API.url('/foods').post(data).json<GetAllFoods>();
    },
    onMutate: async (newFood) => {
      // Cancel in-flight queries
      await queryClient.cancelQueries({ queryKey: ['all-foods'] });

      // Snapshot current state
      const previousFoods = queryClient.getQueryData<GetAllFoods[]>(['all-foods']);

      // Create optimistic entry
      const optimisticFood: GetAllFoods = {
        id: -Math.random(),
        ...newFood,
        verified: false,
        createdBy: 0,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString(),
      };

      // Update cache optimistically
      queryClient.setQueryData(['all-foods'], (old) =>
        old ? [...old, optimisticFood] : [optimisticFood]
      );

      return { previousFoods };
    },
    onError: (err, _, context) => {
      // Rollback on error
      if (context?.previousFoods) {
        queryClient.setQueryData(['all-foods'], context.previousFoods);
      }
    },
    onSettled: () => {
      // Refetch to ensure consistency
      queryClient.invalidateQueries({ queryKey: ['all-foods'] });
    },
  });
};

5. 動(dòng)畫風(fēng)格

動(dòng)畫將我們樂觀的更新帶入生活：

@keyframes shimmer-and-pulse {
  0% {
    background-position: 200% 0;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(83, 109, 254, 0.2);
  }
  50% {
    background-position: -200% 0;
    transform: scale(1.02);
    box-shadow: 0 0 0 10px rgba(83, 109, 254, 0);
  }
  100% {
    background-position: 200% 0;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(83, 109, 254, 0);
  }
}

最佳實(shí)踐

1. 樂觀更新
   • 立即更新 UI，以獲得更好的使用者體驗(yàn)
   • 透過回滾處理錯(cuò)誤狀況
   • 透過適當(dāng)?shù)氖П３仲Y料一致性
2. 模式安全
   • 使用 TypeScript 以獲得更好的可維護(hù)性
   • 為資料結(jié)構(gòu)定義清晰的介面
   • 盡量利用型別推論
3. 性能
   • 更新期間取消正在進(jìn)行的查詢
   • 使用正確的查詢失效
   • 實(shí)施高效率的表單狀態(tài)管理
4. 使用者體驗(yàn)
   • 提供即時(shí)回饋
   • 顯示載入狀態(tài)
   • 優(yōu)雅地處理錯(cuò)誤

未來的增強(qiáng)功能

在您的實(shí)作中考慮這些改進(jìn)：

• 撤銷/重做功能
• 表單驗(yàn)證規(guī)則
• 錯(cuò)誤邊界實(shí)作

結(jié)果

完成請求後

結(jié)論

此實(shí)作示範(fàn)如何使用現(xiàn)代 React 模式建立強(qiáng)大的資料管理系統(tǒng)。 TanStack Query、Mantine UI 和深思熟慮的樂觀更新的結(jié)合創(chuàng)造了流暢和專業(yè)的用戶體驗(yàn)。

記?。?/p>

• 讓你的組件保持專注且可維護(hù)
• 處理所有可能的狀態(tài)（載入、錯(cuò)誤、成功）
• 使用 TypeScript 提高程式碼品質(zhì)
• 在實(shí)作中考慮使用者體驗(yàn)

---

您在 React 應(yīng)用程式中實(shí)施樂觀更新時(shí)面臨哪些挑戰(zhàn)？在下面的評(píng)論中分享您的經(jīng)驗(yàn)。

以上是建構(gòu)樂觀更新的數(shù)據(jù)表的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！