2016-05-18 56 views
1

当我第一次运行服务器时node app.js一切都很好我得到listening on 5050。然后我去localhost:5050 /和我在控制台中得到这些警告服务器正在运行。TypeError:_this.store.getState不是使用从Redux连接时的功能

Warning: Failed propType: Required prop `store.subscribe` was not specified in `Provider`. 
Warning: Failed Context Types: Required child context `store.subscribe` was not specified in `Provider`. 

组件呈现精细那里,但是当我去到本地主机:5050/ballerviews我得到这个服务器上

TypeError: _this.store.getState is not a function 
    at new Connect (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react-redux/lib/components/connect.js:133:38) 
    at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactCompositeComponent.js:148:18) 
    at [object Object].wrapper [as mountComponent] (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactPerf.js:66:21) 
    at Object.ReactReconciler.mountComponent (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactReconciler.js:37:35) 
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactMultiChild.js:241:44) 
    at ReactDOMComponent.Mixin._createContentMarkup (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactDOMComponent.js:591:32) 
    at ReactDOMComponent.Mixin.mountComponent (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactDOMComponent.js:479:29) 
    at Object.ReactReconciler.mountComponent (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactReconciler.js:37:35) 
    at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactCompositeComponent.js:225:34) 
    at [object Object].wrapper [as mountComponent] (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactPerf.js:66:21) 

您可以在我的Github查看完整的项目,因为我觉得通过查看它有你可以得到最好的理解。

我一直试图弄清楚今天整天,我不能。在我尝试在服务器上呈现之前,它工作正常。我很感激帮助,如果您需要更多信息来回答问题,请让我知道。

回答

5

只是有两个小问题:

1 ES2015模块 - > CommonJS的

您在src/store.js使用ES2015 export default,但是你再在app.js通过CommonJS的需要它line #11

这当然没有问题,但您需要时可以访问默认属性。更新行,如下所示:

// Old 
const store = require('./src/store.js') 

// New 
const store = require('./src/store.js').default 

2.服务器

上调用documentsrc/components/BallerViews.jsxline #41您正在访问的文件,这将不会存在于服务器上。一个快速解决方法是将该行包含在条件中:

// Old 
document.body.style.backgroundColor = '#0e0e13' 

// New 
if (typeof document !== 'undefined') { 
    document.body.style.backgroundColor = '#0e0e13' 
} 
+0

该死!非常感谢你,你救了我,我真的很感谢你的帮助。所以基本上任何时候我想访问文档或窗口,我必须将其包装在条件? –

+0

@FreddieCabrera是的,但只有当你服务器渲染。节点不了解DOM。一种流行的做法是像'__CLIENT__'和'__SERVER__'这样的全局变量,以便您可以轻松地定位每个变量。您可以在服务器入口点(app.js)和webpack配置中执行此操作。我已经创建了一个要点,告诉你如何设置它:https://gist.github.com/iamlacroix/38fb4ce4670313bae2a913bbc54b2ae3 –

+0

@MichaelLaCroix。默认解决这个对我来说也是如此。由于许多示例将ES2015与传统相结合,因此很难遵循最佳做法。 – jjr2527

相关问题