未捕获的TypeError:store.getState不是功能nextjs应用

发布时间:2020-07-06 18:00

我正在使用nextjs,对js应用程序做出反应,在创建面向Uncaught TypeError的redux商店时:store.getState不是功能nextjs应用程序。能在这个问题上有所帮助。我正在删除提供商,应用程序正在运行,但是我无法访问商店。 这是我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;

我的应用程序,我正在其中设置提供商。 _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);

这是错误 错误:

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)
回答1

您的实现已过时,您无法再从Next js 9.3版的_app中传递提供程序。随着getServerSideProps和getStaticProps的到来,此实现将不再起作用。请参阅next-redux-wrapper文档以更新您的实现

您也可以选中此Sandbox来了解如何实现。

reduxjs-toolkit 相关推荐