为什么要开始使用 Redux Toolkit？为什么不使用经典 Redux？

Source: Dev.to

引言

当我第一次开始学习 Redux 时，我以为那些样板代码就是它的工作方式。管理一个简单的功能需要：

• Action 类型
• Action 创建函数
• Reducer
• Store 配置

起初感觉“专业”，但几天后就变得重复且令人疲惫。

经典 Redux 的问题

对于单个功能，我需要在多个文件之间来回切换：

• actions.js – 编写常量和函数
• reducers.js – 编写 switch case
• store.js – 配置 store

相同的模式在整个代码库中重复出现，使得即使是小的状态更新也显得笨重。

Redux Toolkit：现代化方案

Redux Toolkit（RTK）去除了不必要的复杂性，同时保留了 Redux 的强大功能。两个核心函数彻底改变了我的认知：configureStore 和 createSlice。

configureStore

经典 Redux

import { createStore, combineReducers, applyMiddleware } from 'redux';
const store = createStore(
  combineReducers({ /* reducers */ }),
  applyMiddleware(/* middleware */)
);

Redux Toolkit

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
});

所有内部设置（中间件、DevTools 集成等）都会自动处理。

createSlice

经典 Redux

// action types
const INCREMENT = 'counter/increment';

// action creators
export const increment = () => ({ type: INCREMENT });

// reducer
export default function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case INCREMENT:
      return { ...state, value: state.value + 1 };
    default:
      return state;
  }
}

Redux Toolkit

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment(state) {
      state.value++;
    },
  },
});

export const { increment } = counterSlice.actions;
export default counterSlice.reducer;

createSlice 会自动生成 action 创建函数和 reducer，用单一、简洁的定义取代了三到四段分散的代码。

迁移策略

不需要一次性全部切换。经典 Redux 与 Redux Toolkit 可以在同一个项目中共存，仍然以常规方式连接到 React。这让你可以逐步迁移，而无需压力。

结论与建议

掌握 Redux Toolkit 后，Redux 变得简单且实用：

• 更少的样板代码
• 不再有散落在文件中的 switch 语句
• 所有相关逻辑集中在一起

如果你现在正在学习 Redux，不要止步于经典 Redux。尽早使用 Redux Toolkit——它会为你节省时间、精力以及大量的困惑。