Uncaught TypeError: store.getState is not a function nextjs app

Question

I am using nextjs, react js app, on creating redux store facing Uncaught TypeError: store.getState is not a function nextjs app . can some one help on this issue . i am removing provider , app is working but i can not access store . here is my code creation of store . store.js

import { configureStore } from '@reduxjs/toolkit';
import { batch, batching } from 'redux-batch-middleware';
import thunk from 'redux-thunk';

const createStore = (reducers, middlewares = []) => (initialState) => {
  const { rootReducer, defaultReducers } = reducers;
  const middlewareList = [thunk, batch, ...middlewares];
  const store = configureStore({
    reducer: batching(rootReducer),
    preloadedState: initialState,
    middleware: middlewareList,
    devTools: true,
  });
  store.asyncReducers = {};
  store.defaultReducers = defaultReducers;
  return store;
};
export default createStore;

my app , where i am setting provider . _app.js

import React from 'react';
import App from 'next/app';
import { ThemeProvider } from 'styled-components';
import { theme } from 'theme';
import { AuthProvider } from 'contexts/auth/auth.provider';

import withRedux from 'next-redux-wrapper';
import { compose } from 'recompose';
import { Provider } from "react-redux";


import creatStore from 'store';
import reducers from 'reducers';

import AppLayout from 'containers/LayoutContainer/AppLayout';

const getStore = creatStore(reducers);



    class ExtendedApp extends App {
    
      static async getInitialProps(appContext) {
        const appProps = await App.getInitialProps(appContext);
        const { req, query } = appContext.ctx;
        const userAgent = req ? req.headers['user-agent'] : navigator.userAgent;
        const { locale } = parseCookies(req);
        const store = _get(appContext, ['ctx', 'store']);
        return { ...appProps, userAgent, query, locale ,store }
      }
      
    
      render() {
        const { Component, pageProps, store,query,locale,userAgent } = this.props as any;;
      
        const deviceType = useDeviceType(userAgent);
        return (
           <Provider store={store}>
          <ThemeProvider theme={theme}>
           
                        <>
                          <AppLayout deviceType={deviceType}>
                            <Component {...pageProps} deviceType={deviceType} />
                          </AppLayout>
                          <GlobalStyle />
                        </>
                     
          </ThemeProvider>
            </Provider> 
        );
      }
    }
    export default compose(
      withRedux(getStore),
    )(ExtendedApp);

here is error error :

Provider.js:19 Uncaught TypeError: store.getState is not a function
    at Provider.js:19
    at mountMemo (react-dom.development.js:15442)
    at Object.useMemo (react-dom.development.js:15738)
    at useMemo (react.development.js:1521)
    at Provider (Provider.js:18)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22157)
    at workLoopSy[![enter image description here][1]][1]nc (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.hydrate (react-dom.development.js:24823)
    at renderReactElement (index.js:38)
    at doRender$ (index.js:44)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:274)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at tryCatch (runtime.js:45)
    at invoke (runtime.js:135)

Answer 1

Your implementation is obsolete, you can no longer pass the provider in _app from version 9.3 of Next js. With the arrival of getServerSideProps and getStaticProps, this implementation will no longer work. see the next-redux-wrapper doc to update your implementation

you can also check this Sandbox to see how to implement that.