错误无法读取未定义的属性 getState - 带有 NextJS 的 Redux答案

【问题标题】：Error cannot read property getState of undefined - Redux with NextJS错误无法读取未定义的属性 getState - 带有 NextJS 的 Redux
【发布时间】：2020-01-15 11:21:44
【问题描述】：

我正在尝试使用 redux 制作一个 nextjs 应用程序，并且我正在设置基本框架。如下所示。

server.js

const express = require("express");
const nextjs = require("next");
const { ROUTES, ROUTE_PATHS } = require("./utils/constants");

const dev = process.env.NODE_ENV !== "production";
const PORT = process.env.PORT || 3001;

const app = nextjs({ dev });
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    const server = express();

    server.get(ROUTES.HOME_ROUTE, (req, res) => {
      app.render(req, res, ROUTE_PATHS.HOME_ROUTE_PATH, {});
    });

    server.get("*", (req, res) => handle(req, res));
    server.listen(PORT, err => {
      if (err) throw err;
      console.log(`> Ready on http://localhost:${PORT}/`);
    });
  })
  .catch(e => {
    console.error(e.stack);
    process.exit(1);
  });

_app.js

import React from "react";
import { Provider } from "react-redux";
import App from "next/app";
import withRedux from "next-redux-wrapper";

import configureStore from "./../redux/store";

class Application extends App {
  static async getInitialProps({ Component, ctx }) {
    const pageProps = Component.getInitialProps
      ? await Component.getInitialProps(ctx)
      : {};
    return { pageProps };
  }
  render() {
    const { Component, pageProps, store } = this.props;
    return (
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    );
  }
}

export default withRedux(configureStore)(Application);

store.js

import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./rootReducer";

export default (initialState = {}, options) => {
  let composeEnhancers = compose;
  if (process.env.NODE_ENV !== "production" && typeof window === "object") {
    if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
      composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({});
    }
    const middlewares = [];
    const enhancers = [applyMiddleware(...middlewares)];
    return createStore(
      rootReducer,
      initialState,
      composeEnhancers(...enhancers)
    );
  }
};

每当我尝试运行客户端时，都会收到错误消息，

Cannot read property 'getState' of undefined
TypeError: Cannot read property 'getState' of undefined
    at Object.<anonymous> (/Users/sriram/Desktop/boilerplate/client/node_modules/next-redux-wrapper/lib/index.js:155:75)
    at step (/Users/sriram/Desktop/boilerplate/client/node_modules/next-redux-wrapper/lib/index.js:56:23)
    at Object.next (/Users/sriram/Desktop/boilerplate/client/node_modules/next-redux-wrapper/lib/index.js:37:53)
    at fulfilled (/Users/sriram/Desktop/boilerplate/client/node_modules/next-redux-wrapper/lib/index.js:28:58)

我觉得在设置 redux 时一定存在某种问题，但我无法完全弄清楚在哪里解决问题。由于没有任何适当的堆栈跟踪，还有其他人遇到过这个问题吗？我该如何解决？

【问题讨论】：

你在哪里打电话getState？

标签： reactjs redux next.js

【解决方案1】：

您的createStore 函数可能存在问题。

export default (initialState = {}, options) => {
  let composeEnhancers = compose;

  // FIXME: it returns undefined in some cases
  if (process.env.NODE_ENV !== "production" && typeof window === "object") {
    if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
      composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({});
    }
    const middlewares = [];
    const enhancers = [applyMiddleware(...middlewares)];
    return createStore(
      rootReducer,
      initialState,
      composeEnhancers(...enhancers)
    );
  }
};

你最好这样写：

export default (initialState = {}, options) => {
  let composeEnhancers = compose;

  if (
    process.env.NODE_ENV !== "production" 
    && typeof window === "object"
    && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
  ) {
    composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({});
  }

  const middlewares = [];
  const enhancers = [applyMiddleware(...middlewares)];

  return createStore(
    rootReducer,
    initialState,
    composeEnhancers(...enhancers)
  );
}

【讨论】：