首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

  1. 首先,确保你已经安装了最新版本的 Redux Toolkit 和 react-redux。可以使用以下命令安装它们:
代码语言:txt
复制
npm install @reduxjs/toolkit react-redux
  1. 在你的代码中导入 createAsyncThunkcreateSlice 函数:
代码语言:txt
复制
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
  1. 创建一个异步的 thunk 函数来处理数据获取的逻辑。可以使用 createAsyncThunk 函数来简化这个过程。示例如下:
代码语言:txt
复制
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

  1. 创建一个初始的状态对象。可以使用 createSlice 函数来创建一个 Redux slice,并定义它的初始状态和 reducer。示例如下:
代码语言:txt
复制
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,并定义了初始状态为一个包含 userloadingerror 属性的对象。然后,我们在 extraReducers 中处理了 fetchUser 异步 thunk 函数的不同状态,比如 pendingfulfilledrejected

  1. 导出 slice 的 reducer 和异步 thunk 函数:
代码语言:txt
复制
export const { reducer } = usersSlice;
export const { fetchUser } = actions;
  1. 在根 reducer 中合并 slice 的 reducer:
代码语言:txt
复制
import { combineReducers } from 'redux';
import { reducer as usersReducer } from './usersSlice';

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

export default rootReducer;
  1. 在你的组件中使用 RTK 查询端点类型。你可以使用 useSelectoruseDispatch 钩子函数来访问 Redux store 中的状态和触发异步 thunk 函数。示例如下:
代码语言:txt
复制
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 的 userloading 属性。然后,我们使用 useDispatch 钩子函数来获取一个 dispatch 函数,并在组件的 useEffect 中触发 fetchUser 异步 thunk 函数来获取用户数据。最后,根据 loadinguser 的状态显示不同的内容。

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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券