ReactJS Redux Provider无法接收configureStore创建的Store问题

你的代码报错核心原因是**store是一个创建store的工厂函数，而非实例化后的store对象**，Provider组件要求传入的是已初始化的Store实例，而非函数，所以TypeScript抛出类型不匹配错误。

以下是两种场景的解决方案：

场景1：普通客户端渲染（无需动态预加载状态） #

修改store.tsx #

直接实例化store并导出，无需返回工厂函数：

import { configureStore } from "@reduxjs/toolkit"
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import rootReducer from "./reducer/rootReducer"

// 直接创建并导出store实例
export const store = configureStore({
  reducer: rootReducer,
  // configureStore默认已集成thunk中间件和Redux DevTools，无需额外配置
})

export type RootState = ReturnType<typeof rootReducer>;
export type AppStore = typeof store;
export type AppDispatch = AppStore['dispatch'];
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
export const useAppDispatch = () => useDispatch<AppDispatch>();

修改index.tsx #

直接使用已实例化的store：

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { consultFilters } from './actions/Actions';
import { store } from './store';

// store是实例，可直接调用dispatch
store.dispatch(consultFilters());

ReactDOM.render(
    (<Provider store={store}>
        <App />
    </Provider>)
  ,
  document.getElementById('root') || document.createElement('div')
);

场景2：需要动态预加载状态（如SSR/SSG） #

如果需要根据不同场景传入预加载状态，保留工厂函数，但要在index.tsx中调用函数生成实例：

修改store.tsx #

import { configureStore, PreloadedState } from "@reduxjs/toolkit"
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import rootReducer from "./reducer/rootReducer"

// 导出创建store的工厂函数
export const makeStore = (preloadedState?: PreloadedState<RootState>) => {
    return configureStore({
      reducer: rootReducer,
      preloadedState
    })
}

// 导出默认实例（可选，供普通场景直接使用）
export const store = makeStore();

export type RootState = ReturnType<typeof rootReducer>;
export type AppStore = ReturnType<typeof makeStore>;
export type AppDispatch = AppStore['dispatch'];
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
export const useAppDispatch = () => useDispatch<AppDispatch>();

修改index.tsx #

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { consultFilters } from './actions/Actions';
import { makeStore } from './store';

// 调用工厂函数生成store实例，可按需传入预加载状态
const store = makeStore();

store.dispatch(consultFilters());

ReactDOM.render(
    (<Provider store={store}>
        <App />
    </Provider>)
  ,
  document.getElementById('root') || document.createElement('div')
);

额外说明 #

• @reduxjs/toolkit的configureStore默认已集成redux-thunk中间件和Redux DevTools，你的依赖中可以保留redux-thunk和redux-devtools-extension，但代码里无需显式配置。
• 类型定义部分保持不变，确保useAppDispatch和useAppSelector能正确推导业务相关的类型。

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