如何在使用代码拆分时创建RTK查询端点类型

在使用代码拆分时创建 Redux Toolkit（RTK）查询端点类型可以通过以下步骤完成：

首先，确保你已经安装了最新版本的 Redux Toolkit 和 react-redux。可以使用以下命令安装它们：

npm install @reduxjs/toolkit react-redux

在你的代码中导入 createAsyncThunk 和 createSlice 函数：

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

创建一个异步的 thunk 函数来处理数据获取的逻辑。可以使用 createAsyncThunk 函数来简化这个过程。示例如下：

const fetchUser = createAsyncThunk(
  'users/fetchUser',
  async (userId, thunkAPI) => {
    // 这里是异步操作的逻辑
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
  }
);

在上面的示例中，fetchUser 是一个异步 thunk 函数，它接收一个 userId 参数，并使用 fetch 函数来获取用户数据。在这个例子中，我们假设后端 API 的地址是 /api/users/:userId。

创建一个初始的状态对象。可以使用 createSlice 函数来创建一个 Redux slice，并定义它的初始状态和 reducer。示例如下：

const usersSlice = createSlice({
  name: 'users',
  initialState: {
    user: null,
    loading: false,
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.loading = false;
        state.user = action.payload;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  },
});

在上面的示例中，我们创建了一个名为 users 的 Redux slice，并定义了初始状态为一个包含 user、loading 和 error 属性的对象。然后，我们在 extraReducers 中处理了 fetchUser 异步 thunk 函数的不同状态，比如 pending、fulfilled 和 rejected。

导出 slice 的 reducer 和异步 thunk 函数：

export const { reducer } = usersSlice;
export const { fetchUser } = actions;

在根 reducer 中合并 slice 的 reducer：

import { combineReducers } from 'redux';
import { reducer as usersReducer } from './usersSlice';

const rootReducer = combineReducers({
  users: usersReducer,
});

export default rootReducer;

在你的组件中使用 RTK 查询端点类型。你可以使用 useSelector 和 useDispatch 钩子函数来访问 Redux store 中的状态和触发异步 thunk 函数。示例如下：

import { useDispatch, useSelector } from 'react-redux';
import { fetchUser } from './usersSlice';

const User = ({ userId }) => {
  const user = useSelector((state) => state.users.user);
  const loading = useSelector((state) => state.users.loading);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchUser(userId));
  }, [dispatch, userId]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (!user) {
    return <div>User not found.</div>;
  }

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
};

在上面的示例中，我们使用 useSelector 钩子函数从 Redux store 中选择 users slice 的 user 和 loading 属性。然后，我们使用 useDispatch 钩子函数来获取一个 dispatch 函数，并在组件的 useEffect 中触发 fetchUser 异步 thunk 函数来获取用户数据。最后，根据 loading 和 user 的状态显示不同的内容。

通过以上步骤，你可以在使用代码拆分时创建 RTK 查询端点类型，实现对数据的异步获取和状态管理。