TypeError: Cannot read property ‘getState’ of undefined in Redux Tookit-CodePudding

So I'm trying to fetch user data from an API. I want to create store that stores two types of data which is the total users and the current user data but not an authentication system but just to display data of current user.

I have been getting the following error in the NextJS app due to redux toolkit and can't seem to get around the problem. The error is:

TypeError: Cannot read properties of undefined (reading 'getState')
    at /Users/karnikkanojia/Desktop/demo/node_modules/react-redux/lib/components/Provider.js:32:57
    at Object.useMemo (/Users/karnikkanojia/Desktop/demo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:4984:19)
    at useMemo (/Users/karnikkanojia/Desktop/demo/node_modules/react/cjs/react.development.js:1648:21)
    at Provider (/Users/karnikkanojia/Desktop/demo/node_modules/react-redux/lib/components/Provider.js:32:44)
    at renderWithHooks (/Users/karnikkanojia/Desktop/demo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5471:16)
    at renderIndeterminateComponent (/Users/karnikkanojia/Desktop/demo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5544:15)
    at renderElement (/Users/karnikkanojia/Desktop/demo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5759:7)
    at renderNodeDestructive (/Users/karnikkanojia/Desktop/demo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5898:11)
    at renderIndeterminateComponent (/Users/karnikkanojia/Desktop/demo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5598:7)
    at renderElement (/Users/karnikkanojia/Desktop/demo/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5759:7)
error - TypeError: Cannot read properties of undefined (reading 'getState')

Here is my store folder data:

pages/store/index.js:

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

const user = configureStore({
    reducer: {
        user: userReducer
    },
});

export default user;

pages/store/userSlice.js:

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    totalUsers: 0,
    currentUser: {
        "id": "",
        "email": "",
        "first_name": "",
        "last_name": "",
        "avatar": ""
    }
}

export const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
        setTotal: (state, action) => {
            state.totalUsers = action.payload;
        },
        setCurrentUser: (state, action) => {
            state.currentUser = action.payload;
        },
    }
})

export const { setTotalUsers, setCurrentUser } = userSlice.actions;
export const userReducer = userSlice.reducer;

pages/_app.js:

import '../styles/globals.css';
import { Provider } from 'react-redux';
import user from './store/index';

function MyApp({ Component, pageProps }) {

  return (
    <Provider>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp

pages/index.js:

import styles from '../styles/Home.module.css';
import { useSelector, useDispatch } from 'react-redux';
import { setTotalUsers, setCurrentUser } from './store/userSlice';

export default function Home() {

  const totalUser = useSelector((state) => state.totalUser);
  const dispatch = useDispatch();

  return (
    <div>
      Total User: {totalUser}
    </div>
  )
}

CodePudding user response：

You have to pass the store to the Provider component:

import user from './store/index';

function MyApp({ Component, pageProps }) {

  return (
    <Provider store={user}>
      <Component {...pageProps} />
    </Provider>
  );
}