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

Question

Im using NextJs 13 and redux toolkit.

When i try the npm run build command, i get this error: Cannot destructure property 'store' of 'useReduxContext(...)' as it is null.

I think this has something to do with useAppSelector, am i getting the state right?

This is the page component:

"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>
  );
}

This is the store.ts file:

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

This is the hooks.ts file:

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

And this is the reducers.ts file:


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

In the `hooks.ts` file try not to import the types, but the classes. Like `import { TypedUseSelectorHook } from 'react-redux'` and the same for the imports from `store.ts` — Jope Algorta, Feb 16 '23 at 15:27
I don't see anywhere in the code provided where you setup your store and redux Provider. If these are missing it would explain your error. — Brian Thompson, Feb 16 '23 at 15:37

score 2 · Accepted Answer · answered Apr 21 '23 at 12:06

2

I had the same issue, my friend. Move the store provider into the pages/_app.js file (Instead of the pages/index.js file), and it should work. Here is what I did:

import { Provider } from 'react-redux';
import '../assert/css/master.scss';
import store from '../store/store';

export default function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

answered Apr 21 '23 at 12:06

Or Assayag

5,662
13
57
93

1

This is exactly what i did. Brian commented the solution already, but i'm marking this as correct. Thanks. – Björn Apr 25 '23 at 00:01

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

1 Answers1

Linked