Next.js 13 + Redux Toolkit构建报错：无法解构useReduxContext返回的store属性

问题 #

执行 npm run build 时出现错误：

Cannot destructure property 'store' of 'useReduxContext(...)' as it is null.

怀疑与 useAppSelector 的使用有关，以下是相关代码：

页面组件 #

"use client";

import React from "react";
import { useAppSelector } from "../../redux/hooks";

export default function HomePage() {
  const user = useAppSelector((state) => state.user);

  return (
    <div>
      <h1>Test</h1>
    </div>
  );
}

store.ts #

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

export const store = configureStore({
  reducer: {
    user: userSlice.reducer,
  },
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

hooks.ts #

import { useDispatch, useSelector } from 'react-redux'
import type { TypedUseSelectorHook } from 'react-redux'
import type { RootState, AppDispatch } from './store'

export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

reducers.ts #

import { RootState } from "./../store";
import { PayloadAction } from "@reduxjs/toolkit";
import { createSlice } from "@reduxjs/toolkit";

export interface userPayload {
  id: number,
  guest: boolean,
  username: string,
  email: string,
  income: number,
  limit: number,
}

const initialUserState = {
  id: 0,
  guest: false,
  username: "",
  email: "",
  income: 0,
  limit: 0,
};

export const userSlice = createSlice({
  name: "user",
  initialState: initialUserState,
  reducers: {
    inputData: (state, action: PayloadAction<userPayload>) => {
      state.income = action.payload.income;
      state.limit = action.payload.limit;
    },
    inputAuth: (state, action: PayloadAction<userPayload>) => {
      state.id = action.payload.id;
      state.guest = action.payload.guest;
      state.username = action.payload.username;
      state.email = action.payload.email;
    },
  },
  
});

export const { inputData, inputAuth } = userSlice.actions

export const selectCount = (state: RootState) => state.user

export default userSlice.reducer

问题原因 #

你的useAppSelector定义和使用本身没有问题，错误核心是Redux的Provider未包裹使用Redux Hooks的组件。Next.js 13的App Router默认是Server Component，即便页面加了"use client"，如果没有在根布局或父组件中用Provider注入Redux Store，组件调用useAppSelector时会无法获取Redux上下文，从而抛出该错误。

解决方案 #

1. 创建Redux Provider组件
   在项目中新建providers/ReduxProvider.tsx文件：

"use client";

import { Provider } from "react-redux";
import { store } from "@/redux/store";

export default function ReduxProvider({ children }: { children: React.ReactNode }) {
  return <Provider store={store}>{children}</Provider>;
}

2. 在根布局中使用Provider
   修改app/layout.tsx，用ReduxProvider包裹整个应用：

import ReduxProvider from "@/providers/ReduxProvider";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <ReduxProvider>{children}</ReduxProvider>
      </body>
    </html>
  );
}

完成以上步骤后，重新执行npm run build即可解决该错误。

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