React中Redux Toolkit的Reducer如何调用extendedApiSlice的getUser接口？

核心原则：Reducer中不能执行异步操作 #

Redux的reducer必须是纯函数，只能同步更新状态，不能包含API调用、定时器这类有副作用的操作——这会破坏状态更新的可预测性，所以你不能直接在updateUser reducer里调用getUser接口。

正确实现方案 #

方案1：在组件中串联操作

直接在组件里先触发UI状态更新，再调用API，逻辑清晰直观：

import { useDispatch } from 'react-redux';
import { useGetUserQuery } from './userSlice';
import { userSlice } from './userSlice';

const YourComponent = () => {
  const dispatch = useDispatch();
  // 获取getUser查询的refetch方法
  const { refetch: fetchUser } = useGetUserQuery();

  const handleUserUpdate = (userInput) => {
    // 第一步：更新UI状态
    dispatch(userSlice.actions.updateUser(userInput));
    // 第二步：调用API保存记录
    fetchUser();
  };

  // 组件渲染逻辑...
};

方案2：用异步Thunk封装逻辑

如果希望把逻辑统一放在Redux层，避免组件代码冗余，可以创建一个异步thunk来串联两个操作：

// userSlice.js中新增
import { createAsyncThunk } from '@reduxjs/toolkit';
import { extendedApiSlice } from './userSlice';

export const updateUserAndSave = createAsyncThunk(
  'user/updateAndSave',
  async (userInput, { dispatch }) => {
    // 先更新UI状态
    dispatch(userSlice.actions.updateUser(userInput));
    // 调用API并等待结果
    const apiResponse = await dispatch(extendedApiSlice.endpoints.getUser.initiate()).unwrap();
    return apiResponse;
  }
);

// 组件中使用
import { useDispatch } from 'react-redux';
import { updateUserAndSave } from './userSlice';

const YourComponent = () => {
  const dispatch = useDispatch();

  const handleUserUpdate = (userInput) => {
    dispatch(updateUserAndSave(userInput));
  };
};

额外建议：调整API端点类型 #

你当前的getUser是query类型，通常用于获取数据，如果是要保存记录到数据库，更适合用mutation类型的端点：

// 修改extendedApiSlice
export const extendedApiSlice = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    saveUser: builder.mutation({
      query: (userData) => ({
        url: 'saveUser',
        method: 'POST',
        body: userData
      }),
    }),
  }),
});

此时调用时用useSaveUserMutation的mutate方法，更贴合保存数据的业务场景。

内容的提问来源于stack exchange，提问作者0o0SkY0o0