错误:无法使用NextJS读取未定义的Redux的属性getState

Question

我正在尝试用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的时候，我觉得一定是出了什么问题，但是我不知道该在哪里解决这个问题。既然没有任何适当的堆栈跟踪，还有没有人遇到过这个问题？我该如何修复它？

Answer 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)
  );
}