*Redux Toolkit 讲解

2026-02-09 15:40:59 栏目：最新资讯 5 阅读

1. 它是什么

可以把它理解为一家大型图书馆的管理系统。

在没有这个系统之前，图书馆（你的应用）管理书籍（应用状态）非常麻烦。每本书的入库、借出、归还（状态的每一个变化）都需要管理员（开发者）手写非常详细的记录（编写大量的Action、Reducer代码），并且要确保记录格式完全正确，过程繁琐且容易出错。

这个工具就是这个管理系统的标准化、自动化版本。它提供了一套预先配置好的工具和规则，让管理员能用更简单、更直接的方式来完成书籍的登记、查找和更新，同时系统会自动帮管理员处理好那些繁琐的书面工作。它不是一个全新的图书馆，而是让原有那套复杂的管理方法（Redux）变得好用起来的官方标准工具集。

2. 它能做什么

它的核心目标是解决使用传统Redux时常见的三个痛点：过于繁琐、配置复杂、需要添加很多额外的包。

简化设置：传统上，搭建Redux环境需要手动组合多个工具。它提供了一个预设好最佳配置的函数，一键即可生成一个功能完善的Store，包含了常用的中间件。
减少模板代码：这是最大的贡献。传统Redux需要分别定义Action类型、Action创建函数和Reducer，并在Reducer中写大量的switch...case语句。它允许在一个地方（createSlice）定义所有这些逻辑，自动生成Action创建函数和Action类型，极大减少了需要手动编写的代码量。
内置高效更新逻辑：直接修改状态是Redux的大忌。以往需要小心翼翼地手动复制旧状态来生成新状态。它内置了Immer库，允许你编写看似“直接修改”状态的代码（例如 state.value = 123），而Immer会在内部安全地为你生成一份全新的不可变状态。
简化异步逻辑：处理数据获取等异步操作曾是Redux的难点。它提供了createAsyncThunk，配合RTK Query（其进阶功能），可以非常简洁地处理数据获取、缓存、加载状态，无需额外添加类似redux-thunk或redux-saga的库。

3. 怎么使用

整个过程可以类比为准备一顿标准化的晚餐。

安装：在项目中安装这个工具包和React绑定库。

创建状态切片：这是核心步骤。想象你在准备一道菜（一个功能模块的状态）。createSlice 要求你提供菜名（name）、初始原料（initialState）和烹饪方法（reducers）。它会根据你写的“烹饪方法”，自动生成对应的“动作指令”。

javascript

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; }, // 这里用了Immer，可以直接“修改”
    decrement: (state) => { state.value -= 1; },
  },
});
// 导出自动生成的“动作指令”
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

配置商店：创建一个“中央厨房”（Store），并把做好的菜（Reducer）放进去。

javascript

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

连接React应用：用Provider组件将“中央厨房”提供给整个餐厅（React应用）。

javascript

import { Provider } from 'react-redux';
import { store } from './store';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

在组件中使用：在具体的餐位（组件）上，使用提供的useSelector来获取需要的菜（状态），用useDispatch来发出“动作指令”。

javascript

import { useSelector, useDispatch } from 'react-redux';
import { increment } from './counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    
      {count}
      
    
  );
}

4. 最佳实践

直接使用这个工具，而不是原始的Redux：对于新项目，这是Redux官方的默认和推荐方式。它封装了所有最佳实践。
一个特性对应一个切片：按照应用的功能模块（如user、products、cart）来组织状态切片，而不是按技术类型（actions、reducers）分文件。这更符合功能优先的开发模式。
利用createAsyncThunk处理简单异步：对于常见的API调用，优先使用它，而不是立即引入更复杂的RTK Query或redux-saga。
为复杂计算使用选择器：useSelector中的逻辑如果比较复杂，应该提取为独立的“选择器”函数。这有助于提高性能（通过记忆化）和代码复用。
使用RTK Query处理数据获取和缓存：如果你的应用严重依赖于从服务器获取数据，应该认真考虑集成RTK Query。它能极大地简化数据缓存、更新、加载状态的管理，消除大量手写的数据获取逻辑。
保持状态序列化：存入状态的数据应尽量是可以被JSON.stringify处理的普通对象、数组、基本类型。避免放入类实例、函数等。

5. 和同类技术对比

与传统Redux：它不是替代品，而是官方的“语法糖”和工具集。它让Redux变得易用。核心概念（单一数据源、不可变状态、纯函数Reducer）没有变，但编写代码的方式变得简单高效。几乎所有新项目都应直接使用它。
与MobX：MobX采用响应式和可变状态的范式，感觉更“魔法”，代码写起来更简短直观，对于中小型应用可能上手更快。而这个工具基于不可变状态，显式派发更新，流程更清晰、可预测，且易于调试（配合Redux DevTools），更适合于大型、需要严格状态追踪的协作项目。
与Context API：React自带的Context适合传递“全局静态配置”（如主题、用户语言），或者更新不频繁的简单状态。当状态更新频繁或逻辑复杂时，使用Context可能导致大量不必要的组件重渲染，手动优化复杂。而这个工具（以及状态管理库）内置了高效的更新订阅机制，能精准控制哪些组件需要响应状态变化，性能更优，并提供了强大的中间件、调试工具和异步处理等企业级功能。
与Zustand、Recoil等现代轻量库：这些库设计更简洁，API更少，包体积更小，学习曲线更平缓。在状态结构相对简单、不需要Redux强大的中间件生态和开发工具的情况下，它们是很好的选择。而这个工具提供了更严格的架构模式和更强的可扩展性，在需要长期维护的超大型项目中，其约定大于配置的风格和清晰的模式可能更具优势。

本文地址：https://www.yitenyun.com/7102.html

上一篇：SpringBoot的消息订阅机制，基于Redis框架设计实···

下一篇：思考有关“低空 eVTOL 飞行器”可行性测试案例分···