我刚刚开始使用redux。我遇到了connect.js的问题。 当我在浏览器中运行我的应用程序时,没有任何显示,并且在控制台中显示以下错误
Uncaught TypeError: _this.store.getState is not a function
at new Connect (connect.js:134)
的屏幕截图
代码
Main.js
import React from 'react';
import {Link} from 'react-router';
class Main extends React.Component{
render(){
return(
<div>
<h1>
<Link>Instagram</Link>
</h1>
{React.cloneElement(this.props.children, this.props)}
</div>
)
}
}
export default Main;
App.js (这是调用连接的地方)
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as actionCreators from '../actions/actionCreator';
import Main from './Main';
/**
* How do expose Actions to some UI elements(e.g. buttons) and how do we expose our data to components
* Ans. Connect()
*/
function mapStateToProps(state){
return{
posts: state.posts,
comments: state.comments
}
}
function mapdispatchToProps(dispatch){
return bindActionCreators(actionCreators,dispatch);
}
const App = connect(mapStateToProps, mapdispatchToProps)(Main);
export default App;
MainFile
import React from 'react';
import {render} from 'react-dom';
import {Router, IndexRoute, Route, browserHistory} from 'react-router';
import css from './styles/style.styl';
import App from './components/App.js'
import PhotoDetails from './components/PhotoDetails.js'
import PhotoGrid from './components/PhotoGrid.js'
import {Provider} from 'react-redux';
import store, {history} from './store';
const router =(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={PhotoGrid}></IndexRoute>
<Route path="/view/:photoId" component={PhotoDetails}> </Route>
</Route>
</Router>
</Provider>
)
render(router, document.getElementById('root'));
答案 0 :(得分:1)
好的,这是你的错误:
在store.js
中,您没有export
store
个对象
将其更改为:
import {createStore, compose} from 'redux';
import {syncHistoryWithStore} from 'react-router-redux';
import {browserHistory} from 'react-router';
//Root reducer
import rootReducer from './reducers/index';
import comments from './data/comments';
import posts from './data/posts';
const defaultState={
posts: posts,
comments: comments
}
const store = createStore(rootReducer, defaultState);
export const history = syncHistoryWithStore(browserHistory,store);
export default store;
然后在reduxstagram.js
中你可以像这样导入它们:
import store, {history} from './store';