从Redux迁移至Redux Toolkit：基于@reduxjs/toolkit的configureStore改造方案咨询

作为刚接触React和Redux的新手，把现有Redux Store迁移到Redux Toolkit（RTK）其实比你想象的简单——RTK本来就是为了简化Redux的繁琐配置而生的。我来一步步带你改造你的代码，完全贴合你的学习需求：

第一步：确保安装Redux Toolkit #

如果还没装的话，先在项目里安装依赖：

npm install @reduxjs/toolkit
# 或者用yarn
yarn add @reduxjs/toolkit

第二步：改造你的store.js文件 #

你的原代码是手动配置createStore、中间件和DevTools，RTK的configureStore已经帮你封装了大部分默认配置，我们只需要做少量调整：

改造后的完整代码 #

import { createBrowserHistory } from "history";
import { configureStore } from "@reduxjs/toolkit";
import { routerMiddleware } from "connected-react-router";
import createRootReducer from "./reducers";

export const history = createBrowserHistory();

export default function configureStore(preloadedState) {
  return configureStore({
    // 传入你的根reducer，用法和之前完全一致
    reducer: createRootReducer(history),
    // 初始状态，和原来的preloadedState参数保持一致
    preloadedState,
    // 配置中间件：RTK默认包含thunk，我们只需要添加routerMiddleware
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware().concat(routerMiddleware(history)),
  });
}

关键变化点说明 #

• 替换核心API：把原来从redux导入的createStore、compose、applyMiddleware换成RTK的configureStore
• 无需手动处理DevTools：configureStore会自动检测并启用Redux DevTools，不用再写window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose这串代码了
• 中间件简化：RTK默认已经集成了redux-thunk，所以你不需要手动在中间件里添加它，只需要把routerMiddleware追加到默认中间件列表里就行
• 你的createRootReducer无需修改：因为configureStore接受的reducer参数可以是任何合法的Redux reducer（包括combineReducers生成的根reducer），所以你reducers.js里的代码完全不用动

这样改造后，你的Store功能和原来完全一致，但代码更简洁，也符合Redux官方推荐的最佳实践，非常适合学习RTK的核心用法。

内容的提问来源于stack exchange，提问作者user10727653