Nextjs Redux getState undefined

Question

Hi i have simple project in Nextjs .I want to get the state of redux store but when i am trying to use store.getState it's throwing one error getState of undefined. And I have one simple vinalla javascript file i want to use getState inside that file also.How can i do that.

//store.js

import { useMemo } from "react";
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { rootReducer } from "./reducer";
import { exampleInitialState } from "./reducer";
let store;

const persistConfig = {
  key: "primary",
  storage,
  whitelist: ["exampleData", "count"], // place to select which state you want to persist
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

function makeStore(initialState = exampleInitialState) {
  return createStore(
    persistedReducer,
    initialState,
    composeWithDevTools(applyMiddleware())
  );
}

export const initializeStore = (preloadedState) => {
  let _store = store ?? makeStore(preloadedState);

  // After navigating to a page with an initial Redux state, merge that state
  // with the current state in the store, and create a new store
  if (preloadedState && store) {
    _store = makeStore({
      ...store.getState(),
      ...preloadedState,
    });
    // Reset the current store
    store = undefined;
  }

  // For SSG and SSR always create a new store
  if (typeof window === "undefined") return _store;
  // Create the store once in the client
  if (!store) store = _store;

  return _store;
};

export function useStore(initialState) {
  const store = useMemo(() => initializeStore(initialState), [initialState]);
  return store;
}

//_app.js

import { useStore } from '../store'
import { Provider } from 'react-redux'
import { persistStore } from 'redux-persist'
import { PersistGate } from 'redux-persist/integration/react'

export default function App({ Component, pageProps }) {
  const store = useStore(pageProps.initialReduxState)
  const persistor = persistStore(store, {}, function () {
    persistor.persist()
  })

  return (
    <Provider store={store}>
      <PersistGate loading={<div>loading</div>} persistor={persistor}>
        <Component {...pageProps} />
      </PersistGate>
    </Provider>
  )
}

vinall.js - How can i use store.getState in this file

import React from "react";
import { useStore } from "../store";
function vanilla() {
  
  return <div>i m vanilla js file</div>;
}

export default vanilla;

//Also in this file

import { useStore } from "../store";
function simplejs() {
  
  let state=useStore.getState();
  return state.tods;
}

Answer 1

To access your redux store you can import the useSelector hook from react-redux and use it like so:

const yourStateProp = useSelector((state) => state.yourStateProp);

Answer 2

const myPersistReducer = persistReducer(persistConfig as any , rootReducer)

const store = createStore(myPersistReducer, applyMiddleware(sagaMiddleware));`

strong text

`It can be asserted that its type is declared for use