Connect.js出错(React-redux)

时间:2017-05-17 12:43:27

标签: reactjs redux react-redux

我刚刚开始使用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'));

1 个答案:

答案 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';