Next.js,Redux 应用程序在 localhost 上运行良好,但不能在生产服务器上运行

Posted

技术标签:

【中文标题】Next.js,Redux 应用程序在 localhost 上运行良好,但不能在生产服务器上运行【英文标题】:Next.js, Redux app works perfectly fine on localhost but not working on production server 【发布时间】:2019-09-11 18:33:48 【问题描述】:

当我在服务器上构建并启动应用程序时,我收到此错误。这似乎与 Redux 有关。

不变违规:在“Connect(Form(LoginForm))”的上下文中找不到“store”。要么包裹根 中的组件,或者将自定义的 React 上下文提供程序传递给连接选项中的 Connect(Form(LoginForm)) 并将相应的 React 上下文使用者传递给。


// createStore.js

import Immutable from 'immutable'
import thunkMiddleware from 'redux-thunk'
import  createLogger  from 'redux-logger'
import  createStore, applyMiddleware, compose  from 'redux'

import config from 'config'
import rootReducer from './reducers/index.js'

function createMiddlewares ( isServer ) 
  let middlewares = [
    thunkMiddleware
  ]

  if (config.env === 'development' && typeof window !== 'undefined') 
    middlewares.push(createLogger(
      level: 'info',
      collapsed: true,
      stateTransformer: (state) => 
        let newState = 

        for (let i of Object.keys(state)) 
          if (Immutable.Iterable.isIterable(state[i])) 
            newState[i] = state[i].toJS()
           else 
            newState[i] = state[i]
          
        

        return newState
      
    ))
  

  return middlewares


function immutableChildren (obj) 
  let state = 
  Object.keys(obj).forEach((key) => 
    state[key] = Immutable.fromJS(obj[key])
  )
  return state


export default (initialState = , context) => 
  let  isServer  = context
  let middlewares = createMiddlewares( isServer )
  let state = immutableChildren(initialState)

  return createStore(
    rootReducer,
    state,
    compose(applyMiddleware(...middlewares))
  )


// _app.js

import withRedux from 'next-redux-wrapper'
import  withRouter  from 'next/router'
import  Provider  from 'react-redux'
import App,  Container  from 'next/app'
import  checkForPopup  from "./helpers/popup.js";
import createStore from './redux/createStore.js'

class MyApp extends App 
  static async getInitialProps ( Component, ctx ) 
    return 
      pageProps: Component.getInitialProps
        ? await Component.getInitialProps(ctx)
        : 
    
  
  render() 
    const  Component, pageProps, store, router  = this.props
    return (
      <Container>
        <Provider store=store>
          <Component router=router ...pageProps />
        </Provider>
      </Container>
    );
  
  componentDidMount() 
    checkForPopup();
  


export default withRedux(createStore)(
  withRouter(MyApp)
)

【问题讨论】:

嗨,博兹,请问您找到解决此问题的方法了吗?我有同样的问题 我终于发现了错误。当我构建应用程序并使用 yarn start 运行时,我遇到了同样的错误,但是当我使用 express 服务器运行时,我没有任何问题 我也有同样的问题,有什么解决办法吗? 【参考方案1】:

根据@wamba-kevin 的评论,在生产环境中运行 express 时,您需要在启动脚本前加上 NODE_ENV=production。我对 next 做了同样的事情,它奏效了。

【讨论】:

以上是关于Next.js,Redux 应用程序在 localhost 上运行良好,但不能在生产服务器上运行的主要内容,如果未能解决你的问题,请参考以下文章

Next.js+Redux 认证和重定向

Next.JS Redux 调度在 getStaticProps() 中不起作用

Next.js,Redux 应用程序在 localhost 上运行良好,但不能在生产服务器上运行

将 Next.js 与 next-redux-wrapper 一起使用时,getInitialProps 似乎不起作用

Next.js s-s-r 存储访问令牌而不使用 redux

如何在 Next.js 中持久化 redux 状态数据?