使用Redux与Next.js时遇‘store.getState is not a function’错误求助

首次尝试结合Redux与Next.js开发，已配置_app.js和store.js，之前用withRedux出现遗留错误，改用createWrapper方案后，触发「TypeError: store.getState is not a function」错误，且makeStore函数未执行（内部console.log无输出）。相关代码及wrapper打印信息如下：

store.js 代码 #

import { configureStore } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';
import authReducer from '../store/slices/authSlice';
import searchReducer from '../store/slices/searchSlice';

const makeStore = () => {
    console.log('config store: ', configureStore({ reducer: { auth, search } }));
    return configureStore({
      reducer: {
        auth: authReducer,
        search: searchReducer,
      },
    });
}

export const wrapper = createWrapper(makeStore, { debug: process.env.NODE_ENV === 'development' });

_app.js 代码 #

import { Provider } from 'react-redux';
import { wrapper } from '../store/store';
function MyApp({ Component, pageProps }) {
  console.log('wrapper: ', wrapper);
  return (
    <Provider store={wrapper}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

wrapper 打印信息 #

wrapper:  {
  getServerSideProps: [Function: getServerSideProps],
  getStaticProps: [Function: getStaticProps],
  getInitialAppProps: [Function: getInitialAppProps],
  getInitialPageProps: [Function: getInitialPageProps],
  withRedux: [Function: withRedux],
  useWrappedStore: [Function: useWrappedStore]
}

问题原因及解决方案 #

1. 核心错误：Provider 传入的不是 Redux Store 实例 #

你在_app.js中直接将wrapper传递给Provider的store属性，但从打印信息能明确看到，wrapper是next-redux-wrapper生成的工具对象（包含各类数据获取方法），并非真正的Redux Store实例。这直接导致了store.getState is not a function报错，同时makeStore函数也不会被触发执行。

2. 正确的集成方式 #

next-redux-wrapper的标准用法是用其withRedux方法包裹你的MyApp组件，它会自动处理Provider的注入和Store实例的创建：

修改后的_app.js：

import { wrapper } from '../store/store';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default wrapper.withRedux(MyApp);

如果偏好钩子方式（更适配Next.js App Router，Pages Router也可使用）：

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

function MyApp({ Component, pageProps }) {
  const store = wrapper.useWrappedStore(pageProps.initialReduxState);
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

3. 额外验证点 #

• 修改完成后重启项目，刷新页面，控制台应能看到makeStore内部的console.log输出，说明Store已正常创建。
• 确保@reduxjs/toolkit和next-redux-wrapper使用最新稳定版本，避免版本兼容问题。

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