Javascript 如何正确处理react服务器端渲染中的window=undefined错误

我在使用窗口对象的浏览器上使用WebSocket。但是因为我使用服务器端渲染和react。我的服务器在编译时崩溃并引发以下错误

 [Error] ReferenceError: window is not defined

特别是因为我的一个组件需要客户端套接字来与服务器通信

我尝试在我的

server.js

文件的开头添加以下代码

if (typeof(window) == 'undefined'){
    global.window = new Object();
}

但出于某种原因，它仍然会引起错误。我还能做什么？有人处理过这个问题吗

更新-问题可能不仅仅局限于套接字。基本上，我在我的组件中从下面的文件导入两个对象

import React from 'react';
import ReactDOM from 'react-dom';

import {Provider} from 'react-redux';
import {createStore} from 'redux';
import { Router, Route, browserHistory ,IndexRoute} from 'react-router'
import routes from '../shared/routes/routes';
import rootReducer from '../shared/reducers/index';
import SocketCluster from 'socketcluster-client';

const initialState = window.__INITIAL_STATE__

export const store = createStore(rootReducer,initialState)

const options = {
  port: 3000
}

if(store.getState().User.isAuthenticated){
  const socket = SocketCluster.connect(options)
}

console.log(store.getState())

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory}>
      {routes}
    </Router>
  </Provider>
  ,document.getElementById('app')
)

import React from 'react';
import Skill from './skill';
import Select from 'react-select';
import {socket ,store} from '../../client/index';

我得到这个错误是因为某种原因。服务器也在查看

窗口。\uuuu初始状态\uuuu

。所以问题是我似乎无法从客户端的index.js文件导入任何内容

---

我能做什么？

Javascript不一定有编译阶段。诚然，大多数实现都是编译的，但没有一个阶段会发生这种情况。对

窗口

变量的访问在执行之前不会抛出

使用React时，仅在客户端上运行代码的正常方法是将其放入

componentDidMount

中

无论如何，我建议不要试图在服务器上创建客户端API的假版本，以防止破坏。相反，确保客户端代码只在客户端上运行

您可以将其封装在函数中，并仅从

componentDidMount

调用它，或者您可以测试环境

function clientInitialize() {
  // start your client side app here
  // create client-side store here
}

function serverInitialize() {
  // create server-side store here
}

if (typeof window === 'object') {
  clientInitialize();
} else {
  serverInitialize();
}

我应该注意到，出于安全性和代码大小的考虑，服务器端代码最好不要发送到客户端。最好从客户机上根本不可用的代码初始化存储

没有一种方法可以做这些事情，每种方法都有优点和缺点

丹·阿布拉莫夫，Redux的创建者，我相信他是一位伟大的支持者，他支持了解您拥有的每一段代码的原因，理解您使用的库，并且更喜欢您理解的方法而不是公认的标准方法。Redux本身在很大程度上基于这些想法，这就是为什么它没有规定太多。这也是为什么在Redux周围有如此众多的附加组件社区

---

实际上，没有必要强制所有代码都与服务器和客户端兼容。把必须分开的部分分开

谢谢你。。我正在看一些服务器呈现的react redux应用程序示例。尤其作者已使套接字对象成为全局对象。如果套接字对象可用，则有条件地执行函数。它似乎如此有效，你认为拥有一个全局对象是可以的吗？这通常不是必需的，但如果它使事情变得非常简单，它当然是允许的。这一切都取决于你是否认为这是个好主意。但是，一般来说，拥有全局数据会产生名称空间问题和代码重用问题。如果答案令人满意，您介意接受答案吗？很抱歉，没有早点回答。。但是我决定继续使用一个全局套接字变量。。现在看来是比较容易的选择。