如何将Redux createStore代码转换为configureStore代码

直接看转换后的完整代码：

import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
import rootReducer from './reducers/index'

// configureStore 自动集成 thunk 和 Redux DevTools，无需手动配置
const store = configureStore({
  reducer: rootReducer
})

const DataProvider = ({ children }) => {
  return (
    <Provider store={store}>
      {children}
    </Provider>
  )
}

export default DataProvider

关键改动说明 #

• 替换核心导入：把原来从redux包导入的createStore、applyMiddleware，换成@reduxjs/toolkit包里的configureStore
• 移除冗余依赖：无需再导入thunk和composeWithDevTools——Redux Toolkit的configureStore默认已经内置了redux-thunk中间件，并且自动启用了Redux DevTools的集成
• 简化store创建逻辑：直接通过configureStore传入reducer配置项即可，不用手动组合中间件和DevTools增强器

如果你的项目还没安装Redux Toolkit，先执行安装命令：

npm install @reduxjs/toolkit react-redux

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