2015-09-25 18 views
13

ho una struttura dell'applicazione collegare che per lo più imita l'esempio redux real-world ma non può andare oltre questo errore:React-redux metodo in grado di individuare in negozio puntelli

Uncaught Error: Invariant Violation: Could not find "store" in either the context or props of "Connect(Home)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Home)".

Qui segue la mia struttura dell'applicazione :

rendere

import { render, createFactory } from 'react' 
import { Provider } from 'react-redux'; 
import router from './router/router' 
import store from './flux/store' 

window.onload =() => { 
    render(createFactory(Provider)({store: store}, 
     () => router 
    ), document.body) 
}; 

Router

import { _ } from 'factories' 
import { Router, IndexRoute, Route } from 'react-router' 
import history from 'history/lib/createBrowserHistory' 

import Home from '../components/home/home' 

let route = _(Route), 
    index = _(IndexRoute); 

let router = _(Router)({history: history()}, 
    route({path: 'home', component: Home}) 
); 

export default router; 

casa Componente

import React, { PropTypes } from 'react' 
import { div } from 'factories' 
import { connect } from 'react-redux' 
import { bindActionCreators } from 'redux'; 
import * as users from '../../flux/actions/users' 

class Home extends React.Component { 

    constructor() { 

     super(); 

     this.state = {} 
    } 

    componentWillMount() { 
     console.log(this.props.users.user) 
    } 

    componentWillUnmount() { 

    } 

    render() { 

     return (
      div({}, "Home") 
     ) 
    } 
} 

export default connect(
    state => { 
     return { 
      users: state.users 
     } 
    }, 
    dispatch => bindActionCreators(users, dispatch) 
)(Home) 

Il risultato è ottenere l'errore di cui sopra. come puoi vedere, sto passando lo store nello stesso modo illustrato nell'esempio redux.

risposta

5

La soluzione è stata trovata in redux troubleshooting docs. Avevo bisogno che il mio router di risposta restituisse una funzione che creava il router effettivo:

import { _ } from 'factories' 
import { Router, IndexRoute, Route } from 'react-router' 
import history from 'history/lib/createBrowserHistory' 

import Home from '../components/home/home' 

let route = _(Route), 
    index = _(IndexRoute); 

const router =() => 
    _(Router)({history: history()}, 
     route({path: 'home', component: Home}) 
    ); 
export default router; 
+1

Stesso effetto collaterale. Ho avuto il createStore() restituire un oggetto (è stato avvolto in parentesi graffe). Una volta che li ho cambiati in parentesi graffe (cioè, restituisco una funzione), l'errore è andato via .... grazie per il suggerimento. –

Problemi correlati