TypeError:_this.store.getState不是使用从Redux连接时的功能
问题描述:
当我第一次运行服务器时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查看完整的项目,因为我觉得通过查看它有你可以得到最好的理解。
我一直试图弄清楚今天整天,我不能。在我尝试在服务器上呈现之前,它工作正常。我很感激帮助,如果您需要更多信息来回答问题,请让我知道。
答
只是有两个小问题:
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.服务器
上调用document
论src/components/BallerViews.jsx
line #41您正在访问的文件,这将不会存在于服务器上。一个快速解决方法是将该行包含在条件中:
// Old
document.body.style.backgroundColor = '#0e0e13'
// New
if (typeof document !== 'undefined') {
document.body.style.backgroundColor = '#0e0e13'
}
该死!非常感谢你,你救了我,我真的很感谢你的帮助。所以基本上任何时候我想访问文档或窗口,我必须将其包装在条件? –
@FreddieCabrera是的,但只有当你服务器渲染。节点不了解DOM。一种流行的做法是像'__CLIENT__'和'__SERVER__'这样的全局变量,以便您可以轻松地定位每个变量。您可以在服务器入口点(app.js)和webpack配置中执行此操作。我已经创建了一个要点,告诉你如何设置它:https://gist.github.com/iamlacroix/38fb4ce4670313bae2a913bbc54b2ae3 –
@MichaelLaCroix。默认解决这个对我来说也是如此。由于许多示例将ES2015与传统相结合,因此很难遵循最佳做法。 – jjr2527