Next Redux Wrapper出现了”无法读取未定义的属性’getState'”的错误。

huangapple go评论83阅读模式
英文:

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 = () =&gt; {
  return createStore(reducers, storeEnhancers);
};

huangapple
  • 本文由 发表于 2020年1月4日 13:03:19
  • 转载请务必保留本文链接:https://go.coder-hub.com/59588046.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定