# Redux 工具包和 RTK 查询 > 现代 Redux 与 RTK 查询用于数据获取。 ## 说明 ### 1\.商店设置 // 商店/index.ts 从'@reduxjs/toolkit'导入{configureStore}；从 './api' 导入 { api }；从 './authSlice' 导入 authReducer；导出常量存储=configureStore({ 减速器：{ [api.reducerPath]: api.reducer, auth: authReducer, }, 中间件：（getDefaultMiddleware）=> getDefaultMiddleware().concat(api.middleware), }); 导出类型 RootState = ReturnType; 导出类型 AppDispatch = typeof store.dispatch; ### 2\.创建切片 // 商店/authSlice.ts 从 '@reduxjs/toolkit' 导入 { createSlice, PayloadAction }; 接口 AuthState { 用户：用户 |无效的; 标记：字符串|无效的; } 常量初始状态：AuthState = { 用户：空，令牌：空， }; 导出 const authSlice = createSlice({ 名称：'验证'，初始状态，减速器：{ setCredentials: (状态，操作：PayloadAction<{ 用户：用户；令牌：字符串 }>) => { state.user = action.payload.user; state.token = action.payload.token; }, 注销：（状态）=> { 状态.用户=空; 状态.token = null; }, }, }); 导出 const { setCredentials, logout } = authSlice.actions; 导出默认 authSlice.reducer； ### 3\. RTK查询接口 // 商店/api.ts 从 '@reduxjs/toolkit/query/react' 导入 { createApi, fetchBaseQuery }; 导出 const api = createApi({ 减速器路径：'api'，基本查询： fetchBaseQuery({ 基址: '/api', 准备标头：（标头，{ getState }）=> { const token = (getState() as RootState).auth.token; 如果（令牌）{ headers.set('授权', `承载 ${token}`); } 返回标头； }, }), tagTypes: ['用户', '帖子'], 端点：（构建器）=>（{ getUsers: builder.query({ 查询：() => '/users', 提供标签：['用户']， }), getUser: builder.query<用户, 字符串>({ 查询：(id) => `/users/${id}`, 提供标签：（结果，错误，id）=> [{ 类型：'用户'，id }]， }), createUser: builder.mutation<用户, 部分<用户>>({ 查询：（正文）=>（{ 网址：'/用户'，方法：'POST'，身体, }), invalidatesTags: ['用户'], }), }), }); 导出常量 { useGetUsersQuery, useGetUserQuery, useCreateUserMutation } = api; ### 4\.使用查询函数用户列表（）{ const { 数据：用户，isLoading，错误 } = useGetUsersQuery(); if (isLoading) 返回 ; 如果（错误）返回<错误/>；返回（

{user.name}

）； } ### 5\.使用突变函数创建用户表单（）{ const [createUser, { isLoading }] = useCreateUserMutation(); const handleSubmit = async (数据: UserFormData) => { 尝试{ 等待 createUser(data).unwrap(); toast.success('用户已创建！'); } 捕获（错误）{ toast.error('创建用户失败'); } }; 返回 ; } ### 6\.类型挂钩 // 商店/hooks.ts 从 'react-redux' 导入 { TypedUseSelectorHook, useDispatch, useSelector }; 导出 const useAppDispatch: () => AppDispatch = useDispatch; 导出 const useAppSelector: TypedUseSelectorHook = useSelector; ## 参考文献 * [Redux 工具包]() * [RTK 查询]()

还原

包含技能