react-redux的@connect产生错误' connect.js:129Uncaught TypeError:无法读取属性' store'未定义的'

时间:2016-07-03 00:25:29

标签: reactjs decorator redux react-redux ecmascript-7

运行我的应用程序(成功捆绑了带有装饰器支持的webpack + babel)时,控制台显示:

'connect.js:129 Uncaught TypeError: Cannot read property 'store' of undefined'

屏幕上没有显示任何其他内容 所有套餐都是最新的。

有什么想法吗?感谢。

app.js:

import React from 'react'
import ReactDOM from 'react-dom'
import Main from './components/main.jsx'

import { combineReducers } from 'redux'
import { Provider, connect } from 'react-redux'
import { createStore } from 'redux'

import * as mainActions from './actions/main_a'
import * as reducers from './reducers/main_r'

const reducer = combineReducers(reducers)
const store = createStore(reducer)

let mapDispatchToProps = (dispatch) => ({
    fireTestAction: () => dispatch(mainActions.testAction( true ))
});

let mapStateToProps = () => ({})

@connect(mapStateToProps, mapDispatchToProps)
export default class App extends React.Component{
    render() {
        return (
            <Provider store={store}>
                <Main txt='Fire test action' action={ fireTestAction} />
            </Provider>,
                document.getElementById('app')
        )
    }
}

var app = new App;
app.render();

的package.json:

"devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "gulp": "^3.9.1",
    "gulp-exec": "^2.1.2",
    "gulp-nodemon": "^2.1.0",
    "gulp-shell": "^0.5.2",
    "gulp-webpack": "^1.5.0",
    "react-hot-loader": "^1.3.0",
    "redux-devtools": "^3.3.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "express": "^4.14.0",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2"
  }
}

2 个答案:

答案 0 :(得分:3)

这是因为您在使用提供商的同一组件上使用connect

  

<Provider store>

     

使Redux存储可用于中的connect()调用   组件层次结构如下通常,您不能使用connect()   将根组件包装在<Provider>

https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store

您应该使用<Main>组件上的连接。

编辑:

此外,如果App组件是您的入口点,则无需导出它,也不需要执行此操作:

var app = new App; app.render();

相反,使用ReactDOM呈现应用程序。像:

ReactDOM.render(
 <Provider store={store}>
  <Main txt='Fire test action' action={ fireTestAction} />
 </Provider>,
 document.getElementById('app')
)

答案 1 :(得分:0)

一个老问题,但是我遇到了这个错误,因为我试图通过调用is null从给定的= { {"Today", TodaysDate, TodaysDate, 1}, {"Yesterday", Date.AddDays(TodaysDate,-1), Date.AddDays(TodaysDate,-1), 2}, {"Week to Date", Date.From(Date.StartOfWeek(TodaysDate,Day.Thursday)), TodaysDate, 3}, {"Previous Week", Date.AddWeeks( Date.From(Date.StartOfWeek(TodaysDate,Day.Thursday)),-1), Date.From(Date.StartOfWeek(TodaysDate,Day.Thursday)), 4}, {"Current Month To Date", Date.From(Date.StartOfMonth(TodaysDate)), TodaysDate, 5}, {"Current Year To Date", Date.From(Date.StartOfYear(TodaysDate)), TodaysDate, 6}, {"Rolling 13Weeks", Date.AddWeeks(TodaysDate,-13) + #duration(1,0,0,0), TodaysDate, 7} } 创建一个组件,这不是创建React组件的正确方法。正确的方法是致电MyComponent: React.ComponentClass