我正在使用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)
您的实现已过时,您无法再从Next js 9.3版的_app中传递提供程序。随着getServerSideProps和getStaticProps的到来,此实现将不再起作用。请参阅next-redux-wrapper文档以更新您的实现
您也可以选中此Sandbox来了解如何实现。