CODEWITHSUNDEEP
reactjsreduxreact-redux
moCap
moCap

Reputation: 969

Error in Connect.js (React-redux)

I have just started working with redux. I am having a problem with connect.js. When I run my app in browser, nothing shows and following error is displayed in console

Uncaught TypeError: _this.store.getState is not a function
    at new Connect (connect.js:134)

also attaching the screenshot of console

The code

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 (This is where connect is being called)

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'));

Upvotes: 0

Views: 354

Answers (1)

Sagiv b.g
Sagiv b.g

Reputation: 31014

Ok here is your mistake:
in store.js you didn't export the store object.
Change it to this: 

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;

And then in reduxstagram.js you can import them like this: 

import store, {history} from './store';

Upvotes: 1

Related Questions