英文:
Next redux wrapper arise error of Cannot read property 'getState' of undefined
问题
_app.js
在这个项目中,我使用了next.js库以及redux,还使用了next redux wrapper。我按照next redux wrapper文档中提到的一切都做了,但在这里它没有正常工作,出现了未定义的getState错误,如上图所示。所以在这里我调试了所有的代码,但我找不到这个错误是从哪里出现的。
我在我的react js文件中列出了以下代码。
_app.js
```javascript
import React from "react";
import App from "next/app";
import { Provider } from "react-redux";
import withRedux from "next-redux-wrapper";
import makeStore from ".././src/config/store";
class ConsoleApp extends App {
/**
* Render View
*/
render() {
const { Component, pageProps, store } = this.props;
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
);
}
}
export default withRedux(makeStore)(ConsoleApp);
root-reducer.js
/**
* 导入依赖项
*/
import { combineReducers } from "redux-immutable";
/**
* 导入Reducers
* App中使用的所有Reducers都必须在此处声明!
*/
import GraphicReducer from "../modules/Graphics/reducer";
import UserReducer from "../modules/User/reducer";
/**
* 组合Reducers
*/
const reducers = combineReducers({
graphics: GraphicReducer,
user: UserReducer
});
/**
* 导出组合的Reducers
*/
export default reducers;
store.js
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import reducers from "./root-reducer";
import thunk from "redux-thunk";
/**
* 准备Redux Store
*/
const composedMiddlewares = applyMiddleware(thunk);
const storeEnhancers = composeWithDevTools({
name: "React-node-test"
})(composedMiddlewares);
const makeStore = () => {
createStore(reducers, storeEnhancers);
};
export default makeStore;
<details>
<summary>英文:</summary>
[![enter image description here][1]][1]
In this project, I use the next js library along with redux and I also use next redux wrapper I do everything as mentioned in the next redux wrapper document but it is not working properly here it arises the getState of undefined error as I display on the above image. So here I debugged all the code but I could not found the point from where this error is arising.
I listed the code below which I have done in my react js files.
_app.js
import React from "react";
import App from "next/app";
import { Provider } from "react-redux";
import withRedux from "next-redux-wrapper";
import makeStore from ".././src/config/store";
class ConsoleApp extends App {
/**
- Render View
*/
render() {
const { Component, pageProps, store } = this.props;
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
);
}
}
export default withRedux(makeStore)(ConsoleApp);
root-reducer.js
/**
- Import Dependencies
*/
import { combineReducers } from "redux-immutable";
/**
- Import Reducers
- All Reducers used in the App must be declared here!
/
import GraphicReducer from "../modules/Graphics/reducer";
import UserReducer from "../modules/User/reducer";
/* - Combine the Reducers
*/
const reducers = combineReducers({
graphics: GraphicReducer,
user: UserReducer
});
/**
- Export the combined Reducers
*/
export default reducers;
store.js
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import reducers from "./root-reducer";
import thunk from "redux-thunk";
/**
- Prepare the Redux Store
*/
const composedMiddlewares = applyMiddleware(thunk);
const storeEnhancers = composeWithDevTools({
name: "React-node-test"
})(composedMiddlewares);
const makeStore = () => {
createStore(reducers, storeEnhancers);
};
export default makeStore;
[1]: https://i.stack.imgur.com/n6NDg.png
</details>
# 答案1
**得分**: 10
请使用以下片段,因为您忘记了**返回** **createStore(reducers, storeEnhancers);**:
```javascript
const makeStore = () => {
return createStore(reducers, storeEnhancers);
};
英文:
Please use the below snippet as you forgot to return the createStore(reducers, storeEnhancers);
const makeStore = () => {
return createStore(reducers, storeEnhancers);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论