React Query 如何订阅 Mutation 的状态更改

在 React Query 中，mutation 是用来执行可能会影响服务器数据的异步逻辑的一种方式。对于需要订阅 mutation 状态更改的情况，React Query 提供了几个用于处理状态和事件的钩子。

使用 useMutation 钩子

useMutation 钩子是 React Query 中处理 mutation 的主要工具。它不仅允许你执行一个异步函数，还可以订阅该 mutation 的几种状态更改。这些状态包括：

• isLoading: 当异步操作正在进行时为 true
• isSuccess: 当异步操作成功完成时为 true
• isError: 当异步操作抛出错误时为 true
• data: 包含异步操作成功响应的数据
• error: 包含异步操作失败时的错误信息

实现案例

假设我们有一个用于添加新用户的 API addUser，以下是如何使用 useMutation 钩子来执行这个 API 并根据其状态更改订阅不同的响应：

jsx
import React from 'react';
import { useMutation } from 'react-query';

function CreateUserComponent() {
  const { mutate, isLoading, isSuccess, isError, error } = useMutation(addUser, {
    // 可以在这里添加 onSuccess, onError, onSettled 等回调来处理特定事件
    onSuccess: () => {
      console.log('User added successfully');
      // 可以进行额外的处理，如状态更新或显示通知等
    },
    onError: (error) => {
      console.error('Error adding user:', error);
      // 这里可以处理错误，显示错误信息等
    }
  });

  const handleAddUser = () => {
    const userData = { name: 'John', email: 'john@example.com' };
    mutate(userData);
  };

  return (
    <div>
      <button onClick={handleAddUser} disabled={isLoading}>
        Add User
      </button>
      {isLoading && <p>Adding user...</p>}
      {isSuccess && <p>User added!</p>}
      {isError && <p>Error: {error.message}</p>}
    </div>
  );
}

解释

• mutate 函数: 用来触发 mutation。它接收需要传递给异步函数的数据。
• 状态标志: 如 isLoading, isSuccess 等标志让你可以根据 mutation 的不同状态来更新 UI。
• 事件回调: onSuccess, onError 和 onSettled 回调允许你在 mutation 达到特定状态时执行额外的逻辑。

通过这种方式，React Query 提供了一种非常强大且灵活的方式来处理异步数据更新以及基于这些更新状态的 UI 渲染。