如何用RTK Query优雅实现多个依赖Mutation的链式调用？

用多个useEffect串联依赖Mutation的逻辑确实容易出现状态竞态、逻辑分散、维护成本高的问题，下面是两种更健壮的实现方式：

1. 封装异步函数统一管理流程 #

将整个链式调用逻辑封装在一个异步函数中，利用RTK Query的unwrap()方法获取响应数据并处理错误，流程清晰且集中：

import { useCreateListMutation, useAddPersonsToListMutation, useSendListMutation } from './apiSlice';

function ListWorkflowComponent({ personIds }) {
  const [createList] = useCreateListMutation();
  const [addPersonsToList] = useAddPersonsToListMutation();
  const [sendList] = useSendListMutation();

  // 触发整个流程的入口函数
  const startFullWorkflow = async () => {
    try {
      // 第一步：创建列表，获取返回的id
      const listResult = await createList().unwrap();
      // 第二步：添加人员到目标列表
      await addPersonsToList({
        listId: listResult.id,
        personIds: personIds
      }).unwrap();
      // 第三步：发送列表
      await sendList({ listId: listResult.id }).unwrap();
      
      console.log('全流程执行完成');
    } catch (error) {
      // 统一捕获整个流程的错误，避免单个步骤失败导致后续逻辑混乱
      console.error('流程执行失败:', error);
    }
  };

  return (
    <button onClick={startFullWorkflow}>启动列表流程</button>
  );
}

2. 组件挂载自动执行的优化方案 #

如果需要组件挂载时自动触发流程，只需用单个useEffect调用封装好的异步函数即可，避免多个useEffect的依赖嵌套：

import { useEffect } from 'react';
import { useCreateListMutation, useAddPersonsToListMutation, useSendListMutation } from './apiSlice';

function AutoRunListWorkflow({ personIds }) {
  const [createList] = useCreateListMutation();
  const [addPersonsToList] = useAddPersonsToListMutation();
  const [sendList] = useSendListMutation();

  const executeWorkflow = async () => {
    try {
      const listResult = await createList().unwrap();
      await addPersonsToList({ listId: listResult.id, personIds }).unwrap();
      await sendList({ listId: listResult.id }).unwrap();
    } catch (error) {
      console.error('自动流程执行失败:', error);
    }
  };

  // 仅在组件挂载时执行一次
  useEffect(() => {
    executeWorkflow();
  }, []);

  return <div>列表流程执行中...</div>;
}

额外优化：状态与错误处理 #

可以单独获取每个Mutation的状态，用于展示加载提示或错误信息：

const [createList, { isLoading: creatingList, isError: createError }] = useCreateListMutation();
const [addPersonsToList, { isLoading: addingPersons, isError: addError }] = useAddPersonsToListMutation();
const [sendList, { isLoading: sendingList, isError: sendError }] = useSendListMutation();

// 组合全流程加载状态
const isFullWorkflowLoading = creatingList || addingPersons || sendingList;
// 组合全流程错误状态
const hasWorkflowError = createError || addError || sendError;

内容的提问来源于stack exchange，提问作者Lee Hitchcock