ルートはプロバイダReduxに指定されたストアにアクセスできない

Question

私のコンポーネントは主にその小道具を介して店舗にアクセスしたいと思います。

私はreduxを使用している場合、これを行うための正しい方法は、私はこのすべてがセットアップされているが、それでも私のComponentsがprop

ような状態を持っていないProvider

にconnectを使用していると考えていますApp.js

私は愚かであると信じているので、完全性のためにここにすべてを追加しました。申し訳ありません。

import React, { Component, PropTypes } from 'react' 
import { bindActionCreators } from 'redux' 
import { connect } from 'react-redux' 
import * as currentSexActionCreator from '../actions/currentSexActionCreator'; 

import { browserHistory } from 'react-router' 

class App extends Component { 
    constructor(props) { 
     super(props) 
     this.handleChange = this.handleChange.bind(this) 
    } 

    handleChange(nextValue) { 
     browserHistory.push(`/${nextValue}`) 
    } 

    render() { 
     return (
      <div> 
       {this.props.children} 
      </div> 
     ) 
    } 
} 

App.propTypes = { 
    // Injected by React Router 
    children: PropTypes.node 
} 

function mapStateToProps(state, ownProps) { 
    return { 
     errorMessage: state.errorMessage, 
     inputValue: ownProps.location.pathname.substring(1), 
     'hutber':'hutber' 
    } 
} 
function mapDispatchToProps(dispatch) { 
    return { 
     currentSexAction: bindActionCreators(currentSexActionCreator, dispatch) 
    } 
} 
export default connect(mapStateToProps, mapDispatchToProps)(App) 

Aコンポーネント - それは小道具に

class Sex extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      participants: 1 
     } 
    } 

    onSetParticipants = (data) => { 
     store.dispatch (currentSex.setParticipants(data.valueText)); //the incorrect way to dispatch things, store is referencing the store 
    } 

    render() { 
     console.info(this.props); 
     return (
      <div> 
       .... 
       something here 
       .... 
      </div> 
     ) 
    } 
}  

export default Sex; 

*プロバイダを持つ必要があります**

export default class Root extends Component { 
    render() { 
    const { store, history } = this.props; 
    return (
     <Provider store={store}> 
      <Router history={history}> 
      <Route path="/" component={App}> 
       <IndexRoute component={Splash}/> 

       {/*No Signed In Page*/} 
       <Route path="/signin" component={SignIn} onEnter={authStates.blockForLoggedInUsers}/> 
       <Route path="/signup" component={signUp} onEnter={authStates.blockForLoggedInUsers}/> 
       <Route path="/signupconfirm" component={SignUpConfirm} onEnter={authStates.blockForLoggedInUsers}/> 

       {/*Login Required*/} 
       <Route path="/home" component={Home} onEnter={authStates.requireLogin}/> 
       <Route path="/selection" component={Selection} onEnter={authStates.requireLogin}/> 

       {/*Sex Selection*/} 
       <route path="/desire" component={Desire} onEnter={authStates.requireLogin}/> 
       <route path="/desire/saved" component={DesireSaved} onEnter={authStates.requireLogin}/> 
       <route path="/masturbation" component={Masturbation} onEnter={authStates.requireLogin}/> 
       <route path="/masturbation/saved" component={MasturbationSaved} onEnter={authStates.requireLogin}/> 
       <route path="/sex" component={Sex} onEnter={authStates.requireLogin}/> 
       <route path="/sex/saved" component={SexSaved} onEnter={authStates.requireLogin}/> 

      </Route> 
      </Router> 
      {/*<DevTools />*/} 
     </Provider> 
    ) 
    } 
} 

私はあなたがより多くの情報が必要な場合はわからないけど、基本的には私のコンポーネントconsole.info(this.props.store)内部is undefined

私はそれについて正しく考えていないのでしょうか？

Answer 1

connectは、接続された子コンポーネントの小道具に魔法のように小道具を設定しません。接続する変数には、ストア変数のみが渡されます。あなたは、さらにそれらを渡したい場合は、これを自分で行う必要があります。

let App = ({ foo }) => { 
    return React.cloneElement(this.props.children, { foo, somethingElse: 'blah' }) 
} 

connect(state => ({ foo: state.foo }))(App) 

これはあなたのために理にかなっている場合は、それのために行く（あなたがする場合、またはコンテナ）、しかし、それは、そのコンポーネントを接続するためにおそらくより一般的ですストアデータが必要です。何百ものコンポーネントを接続することに何も問題はありません。

class Sex extends Component { 
    // now you have access to store data and dispatch 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Sex)