如何将RTK Query返回的数据作为Redux Slice的默认初始状态？

你的核心问题在于：Redux Slice的初始状态是同步初始化的，而RTK Query的API数据是异步获取的，没法直接在initialState里引用异步数据。以下是两种最佳实现方案：

方案一：在Slice中监听RTK Query的请求完成Action #

利用RTK Query自动生成的请求生命周期Action，在Slice的extraReducers中监听API请求成功的事件，直接初始化isEmployee状态。这种方式适合全局需要该状态的场景，只要API请求成功就会自动同步初始值。

代码示例： #

假设你的RTK Query API切片名为apiSlice，对应的查询endpoint是getEmployee：

import { createSlice } from '@reduxjs/toolkit';
import { apiSlice } from './path-to-your-api-slice';

// 初始状态设为undefined或默认布尔值，等待API数据填充
const initialState = {
    isEmployee: undefined,
};

export const employeeSlice = createSlice({
    name: "employeeSlice",
    initialState,
    reducers: {
        toggleEmployee: (state, action) => {
            state.isEmployee = action.payload;
        },
    },
    extraReducers: (builder) => {
        // 监听getEmployee查询成功的Action
        builder.addMatcher(
            apiSlice.endpoints.getEmployee.matchFulfilled,
            (state, action) => {
                // 基于返回的options和badges计算初始isEmployee值
                state.isEmployee = !!action.payload.options && !!action.payload.badges;
            }
        );
    }
});

export const { toggleEmployee } = employeeSlice.actions;
export default employeeSlice.reducer;

方案二：在组件中通过useEffect初始化状态 #

如果仅在特定组件中需要该状态，可以在获取到RTK Query数据后，通过useEffect触发Action来初始化Slice状态。

代码示例： #

import { useGetEmployee } from './path-to-your-api-hooks';
import { useDispatch } from 'react-redux';
import { toggleEmployee } from './employeeSlice';

function YourComponent() {
    const { data: employeeData, isSuccess } = useGetEmployee();
    const dispatch = useDispatch();

    // 当API请求成功且拿到数据时，初始化isEmployee
    useEffect(() => {
        if (isSuccess && employeeData) {
            const initialIsEmployee = !!employeeData.options && !!employeeData.badges;
            dispatch(toggleEmployee(initialIsEmployee));
        }
    }, [employeeData, isSuccess, dispatch]);

    // 后续使用useSelector获取isEmployee状态即可
}

关键注意事项 #

1. 不要直接修改RTK Query的缓存数据：RTK Query的缓存是只读的，所有本地修改的状态应该单独存放在自定义Slice中，这也是你当前做法的正确方向。
2. 布尔值计算要严谨：原代码中options && badges如果遇到非空对象会返回对象本身而非布尔值，建议用!!转换为严格布尔值，避免后续条件判断出错。

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