【问题标题】:TypeError: _this.store.getState is not a function when using connect from ReduxTypeError: _this.store.getState is not a function when using connect from Redux
【发布时间】:2016-09-14 09:28:25
【问题描述】:

当我第一次使用node app.js 运行服务器时,一切正常,我得到listening on 5050。然后我转到 localhost:5050/,我在运行服务器的控制台中收到这些警告。

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`. 

组件在那里渲染得很好,但是一旦我进入 localhost: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 上查看完整的项目,因为我觉得在那里查看可以得到最好的理解。

我今天一整天都在努力解决这个问题,但我做不到。在我尝试在服务器上渲染之前它工作正常。感谢您的帮助,如果您需要更多信息来回答问题,请告诉我。

【问题讨论】:

    标签: javascript node.js reactjs redux react-redux


    【解决方案1】:

    只有两个小问题:

    1。 ES2015 模块 -> CommonJS

    您在 src/store.js 中使用 ES2015 export default,但是您随后通过 app.js 中的 line #11 上的 CommonJS 需要它。

    这当然没问题,但您需要在需要时访问默认属性。如下更新该行:

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

    2。在服务器上调用document

    src/components/BallerViews.jsxline #41 上,您正在访问该文档,该文档在服务器上不存在。一个快速的解决方法是将该行包装在一个条件中:

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

    【讨论】:

    • 该死!非常感谢您,您救了我,我非常感谢您的帮助。所以基本上每当我想访问文档或窗口时,我都必须将其包装在条件中?
    • @FreddieCabrera 是的,但仅限于服务器渲染时。 Node 不了解 DOM。一种流行的做法是像__CLIENT____SERVER__ 这样的全局变量,这样您就可以轻松地定位每个变量。您可以在服务器入口点 (app.js) 和 webpack 配置中执行此操作。我创建了一个要点来向您展示如何设置它:gist.github.com/iamlacroix/38fb4ce4670313bae2a913bbc54b2ae3
    • @MichaelLaCroix .default 也为我解决了这个问题。由于很多示例混合了 ES2015 与旧版,因此很难遵循最佳实践。