目录前言一、RTK 的核心价值二、深入理解 RTK 的核心 API1、状态管理核心 APIRTK 的基石1、configureStore() — 创建 StoreRTK 的权威方式2、createSlice() — 自动创建 reducer actionsRTK 最重要的 API3、createAction() — 少用因 createSlice 更优4、createReducer() — 少用因 createSlice 更优2、异步逻辑核心 API现代 Redux 异步的标准1、createAsyncThunk() — 统一异步流程pending/fulfilled/rejected3、结构化数据管理核心 API处理列表/字典的终极武器4、扩展性 / 中间件核心 API企业级项目必备1、Listener Middleware监听系统2、Action Matching动作匹配5、服务器状态管理核心 APIRTK Query三、RTK 实战架构真实企业级项目四、何时用 RTK 或 RTK Query 或 Zustand五、RTK 典型案例1、用户登录最经典业务场景2、商品购物车典型复杂业务状态3、列表 / 分页 / 搜索使用 RTK Query4、权限系统角色 菜单5、WebSocket6、企业项目分模块多 Slice 架构统一 store7、多步骤复杂表单多步骤、多页面8、乐观更新删除点赞、删除操作前言Redux 官方文档已经明确宣布❗ 不要再手写 Redux 代码❗ 必须使用 Redux Toolkit❗ “旧 Redux 写法仅用于遗留项目”Redux Toolkit 中文文档Redux 中文官网一句话说明 Redux Toolkit 与 Redux 的关系Redux ToolkitRTK 是 Redux 的官方升级版。RTK 依赖 Redux你安装 RTK 时 Redux 会自动安装。RTK 解决了 Redux 过去最痛苦的点这些痛点包括太多样板代码reducer 太繁琐不可变数据难写异步写法混乱store 配置复杂RTK 统一解决代码减少 70%Reducer 直接写“可变代码”自动处理 immutable官方的异步方案官方的 API 请求方案RTK Query关于 Redux 的学习请看 redux 学习一、RTK 的核心价值RTK 的目标不是“新增 API”而是消除 Redux 旧写法 70% 的样板代码。包括action typesaction creators手写 immutable reducerthunk 手写异步逻辑让 Redux 成为“可用的现代状态管理工具”。包含异步请求内置createAsyncThunk数据不可变自动处理Immerstore 自动增强中间件自动包含 thunk服务器状态内置RTK Query让 Redux 拥有类似 MobX/Zustand 的开发体验但保持 Redux 的可控性二、深入理解 RTK 的核心 APIRTK 核心 API 总表类别API是否核心说明StoreconfigureStore⭐⭐⭐⭐⭐Redux store 的现代构建方式SlicecreateSlice⭐⭐⭐⭐⭐自动生成 reduceractionActioncreateAction⭐⭐⭐底层 APIReducercreateReducer⭐⭐没 createSlice 好用AsynccreateAsyncThunk⭐⭐⭐⭐⭐异步逻辑的标准EntitycreateEntityAdapter⭐⭐⭐⭐列表状态管理最佳工具MiddlewarecreateListenerMiddleware⭐⭐⭐⭐响应式监听、自动逻辑Action MatchingisAnyOf / isAllOf / isPending / isRejected⭐⭐⭐⭐批量处理 actionRTK QuerycreateApi⭐⭐⭐⭐⭐服务器状态管理RTK QueryfetchBaseQuery⭐⭐⭐⭐⭐API 模块基础下面按重要程度递减规则对 RTK 的核心 API 进行分别研究。1、状态管理核心 APIRTK 的基石1、configureStore() — 创建 StoreRTK 的权威方式作用替代 Redux 的 createStore自动集成Redux DevToolsredux-thunk序列化校验immutable 校验⭐为什么是核心因为它构建了整个状态管理系统是 RTK 的起点。典型用法conststoreconfigureStore({reducer:{user:userSlice.reducer,cart:cartSlice.reducer,}});2、createSlice() — 自动创建 reducer actionsRTK 最重要的 API作用一次性创建reducer、action creators、action type内部使用 immer 自动处理不可变数据。⭐为什么是核心它彻底改变 Redux 写法使 Redux 恢复优雅。用法constcounterSlicecreateSlice({name:counter,initialState:0,reducers:{increment(state){returnstate1;},add(state,action){returnstateaction.payload;}}});3、createAction() — 少用因 createSlice 更优createAction 通常用于“复用单独 action 类型时”不常用没 createSlice() 好用。4、createReducer() — 少用因 createSlice 更优createReducer() 通常用于想手写 reducer 但又想使用 immer 时不常用没 createSlice() 好用。2、异步逻辑核心 API现代 Redux 异步的标准1、createAsyncThunk() — 统一异步流程pending/fulfilled/rejected作用替代 redux-thunk 手写逻辑自动生成 3 个生命周期 action最佳异步方案用法constfetchUsercreateAsyncThunk(users/fetch,async(id){constresawaitfetch(/api/user/${id});returnres.json();});在 Slice 中处理extraReducers:(builder){builder.addCase(fetchUser.pending,(state){state.loadingtrue}).addCase(fetchUser.fulfilled,(state,action){state.dataaction.payload}).addCase(fetchUser.rejected,(state){state.errortrue})}3、结构化数据管理核心 API处理列表/字典的终极武器createEntityAdapter() — 列表类状态的最佳实践。作用自动提供 CRUD 操作方法数据结构自动规范为{ids:[], entities:{}}满足大型项目需求为什么是核心这个 API 让“处理列表数据”能力达到框架级别不再需要手写复杂增删改查。用法constusersAdaptercreateEntityAdapter();constusersSlicecreateSlice({name:users,initialState:usersAdapter.getInitialState(),reducers:{userAdded:usersAdapter.addOne,usersReceived:usersAdapter.setAll,},});非常强大。4、扩展性 / 中间件核心 API企业级项目必备1、Listener Middleware监听系统入口 APIcreateListenerMiddleware()listenerMiddleware.startListening()能力监听 action / state 的变化实现自动保存草稿实现自动刷新 Token实现客户端缓存同步这是 RTK 提供的“响应式数据流系统”Redux 原版完全没有。示例listenerMiddleware.startListening({actionCreator:loginSuccess,effect:async(action,listenerApi){await listenerApi.dispatch(fetchUserInfo());}});2、Action Matching动作匹配特性 APIisAnyOfisAllOfisRejectedisPending用法例子builder.addMatcher(isAnyOf(fetchA.fulfilled,fetchB.fulfilled),(state,action){state.data.push(action.payload);})用来统一处理多个 action非常适合批量处理异步结果。5、服务器状态管理核心 APIRTK Query下面这两个是“服务器状态”不是客户端状态的核心能力createApi() — 创建服务模块fetchBaseQuery() — 内置轻量 fetch 封装RTK Query 是 RTK 最强组件它让 Redux 拥有现代服务器状态能力。几乎可以替代React QuerySWRAxios 手写请求redux-thunk 异步redux-sagaRTK Query 功能包括自动缓存不同参数自动缓存不会重复请求。自动 refetch参数变、失效、网络恢复时自动请求。自动请求生命周期组件 unmount 时自动处理状态。自动错误处理自动数据同步自动生成 API Hooks示例constapicreateApi({baseQuery:fetchBaseQuery({baseUrl:/api}),endpoints:(builder)({getUser:builder.query({query:(id)user/${id}})})});三、RTK 实战架构真实企业级项目以下是企业最佳实践架构推荐 monorepo/turbosrc/app/store.ts hooks.ts// useAppSelector / useAppDispatchfeatures/auth/authSlice.ts authApi.ts(RTK Query)todo/todoSlice.ts todoApi.ts shared/utils/types/components/分层app 层根 store hooksfeatures 层按业务模块划分微模块化shared 层通用函数/组件这种结构适应大型后台系统商城系统多模块前端工程四、何时用 RTK 或 RTK Query 或 Zustand功能类型最适合工具服务器状态接口数据RTK Query全局 UI 状态modal 开关Zustand / Recoil / useState用户信息、权限RTKslice购物车/表单/复杂业务逻辑RTK简单局部状态useState / useReducer五、RTK 典型案例1、用户登录最经典业务场景用户登录是 RTK 最常见的真实案例// authSlice.ts管理 token、userInfoimport{createSlice,createAsyncThunk}fromreduxjs/toolkit;import{loginApi}from/api/auth;exportconstlogincreateAsyncThunk(auth/login,async({username,password}){constresawaitloginApi(username,password);returnres.data;// { token, user }});constauthSlicecreateSlice({name:auth,initialState:{token:null,user:null,loading:false,error:null,},reducers:{logout(state){state.tokennull;state.usernull;}},extraReducers:(builder){builder.addCase(login.pending,(state){state.loadingtrue;state.errornull;}).addCase(login.fulfilled,(state,action){state.loadingfalse;state.tokenaction.payload.token;state.useraction.payload.user;}).addCase(login.rejected,(state){state.loadingfalse;state.errorLogin failed;});},});exportconst{logout}authSlice.actions;exportdefaultauthSlice.reducer;使用dispatch(login({username,password}));2、商品购物车典型复杂业务状态RTK 的 Immer 让你直接像操作普通对象一样写逻辑// cartSlice.tsimport{createSlice}fromreduxjs/toolkit;constcartSlicecreateSlice({name:cart,initialState:{items:[],// [{ id, name, price, qty }]},reducers:{addItem(state,action){constitemaction.payload;constexiststate.items.find(ii.iditem.id);if(exist){exist.qty1;}else{state.items.push({...item,qty:1});}},removeItem(state,action){state.itemsstate.items.filter(ii.id!action.payload);},clearCart(state){state.items[];},},});exportconst{addItem,removeItem,clearCart}cartSlice.actions;exportdefaultcartSlice.reducer;相比传统 Redux 需要手写很多 immutable 代码RTK 自动帮你处理。3、列表 / 分页 / 搜索使用 RTK Query这是 后台系统中最常见的列表模式// todoApi.tsRTK Queryimport{createApi,fetchBaseQuery}fromreduxjs/toolkit/query/react;exportconsttodoApicreateApi({reducerPath:todoApi,baseQuery:fetchBaseQuery({baseUrl:/api}),endpoints:(builder)({getTodos:builder.query({query:({page1,keyword})/todos?page${page}keyword${keyword},// 缓存按参数隔离keepUnusedDataFor:60,})})});exportconst{useGetTodosQuery}todoApi;使用const{data,isLoading}useGetTodosQuery({page,keyword});4、权限系统角色 菜单多用于企业后台。// permissionSlice.tsimport{createSlice,createAsyncThunk}fromreduxjs/toolkit;import{getPermissions}from/api/permission;exportconstfetchPermissionscreateAsyncThunk(permission/fetch,async(){constresawaitgetPermissions();returnres.data;// { menus, roles }});constslicecreateSlice({name:permission,initialState:{menus:[],roles:[],loading:false,},extraReducers:(builder){builder.addCase(fetchPermissions.pending,(state){state.loadingtrue;}).addCase(fetchPermissions.fulfilled,(state,action){state.loadingfalse;state.menusaction.payload.menus;state.rolesaction.payload.roles;});},});exportdefaultslice.reducer;5、WebSocket使用 Listener Middleware监听 action 的中间件。// websocketListener.tsimport{createListenerMiddleware}fromreduxjs/toolkit;import{messageSlice}from./messageSlice;import{addMessage}from./messageSlice;constlistenercreateListenerMiddleware();listener.startListening({actionCreator:messageSlice.actions.connect,effect:async(action,{dispatch}){constwsnewWebSocket(ws://localhost:3000);ws.onmessage(event){dispatch(addMessage(JSON.parse(event.data)));};},});exportdefaultlistener;RTK Listener Middleware 小型 redux-saga但更轻量更可控。6、企业项目分模块多 Slice 架构统一 store// store.tsimport{configureStore}fromreduxjs/toolkit;importauthReducerfrom./authSlice;importcartReducerfrom./cartSlice;importpermissionReducerfrom./permissionSlice;import{todoApi}from./todoApi;importwsListenerfrom./websocketListener;exportconststoreconfigureStore({reducer:{auth:authReducer,cart:cartReducer,permission:permissionReducer,[todoApi.reducerPath]:todoApi.reducer,},middleware:(getDefaultMiddleware)getDefaultMiddleware().concat(todoApi.middleware,wsListener.middleware,),});这是大型真实项目的典型结构企业标准写法。7、多步骤复杂表单多步骤、多页面例如多步骤注册表单// formSlice.tsconstformSlicecreateSlice({name:form,initialState:{step:1,data:{name:,age:,address:,}},reducers:{updateField(state,action){const{field,value}action.payload;state.data[field]value;},nextStep(state){state.step1;},prevStep(state){state.step-1;},}});exportconst{updateField,nextStep,prevStep}formSlice.actions;exportdefaultformSlice.reducer;8、乐观更新删除点赞、删除操作RTK Query 自带最佳写法。// deleteTodo乐观更新deleteTodo:builder.mutation({query:(id)({url:/todos/${id},method:DELETE,}),// 乐观更新asynconQueryStarted(id,{dispatch,queryFulfilled}){constpatchResultdispatch(todoApi.util.updateQueryData(getTodos,undefined,(draft){returndraft.filter((t)t.id!id);}));try{await queryFulfilled;}catch{patchResult.undo();}},});即使请求失败也能回滚到最新状态。