Props.storeは子コンポーネントでは機能しません

Question

助けてください。

this.props.storeは、子コンポーネントでは機能しません。

しかし、connect（mapStateToProps、mapDispatchToProps）...はうまくいきます。

なぜ子コンポーネントのみが機能しないのですか？

1.親コードが

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Home } from './container/home/index'; 
import { ChildrenComponent } from './container/childrenComponent'; 
import { Match, Miss } from 'react-router'; 
import { BrowserRouter as Router } from 'react-router'; 

import { createStore } from 'redux'; 
import { Provider } from 'react-redux'; 
import Reducers from './reducers'; 

const store = createStore(Reducers); 
store.subscribe(() => console.log('ㅡㅡㅡㅡㅡ store was updated ㅡㅡㅡㅡㅡ')); 
store.subscribe(() => console.log(store.getState())); 
store.subscribe(() => console.log('ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ')); 

ReactDOM.render(
    <Provider store={store}> 
    <Router> 
     <div> 
     <Match pattern="/" component={Home} /> 
     <Match pattern="/ChildrenComponent" component={ChildrenComponent} /> 
     </div> 
    </Router> 
    </Provider>, 
    document.getElementById('root') 
); 

2.子供の成分（のみ動作していない 'this.props.storeを.....'）（正常に動作している）

import React, { Component } from 'react'; 
import $ from 'jquery'; 
import { connect } from 'react-redux'; 

class ChildrenComponent extends Component { 
    constructor (props) { 
    super (props); 
    } 
    render (
    console.log(this.props.store) // undfined 
    console.log(this.props.store.getState()) // does not working 

    const mapStateToProps = (state) => { 
     return { 
     // .... is working fine 
     } 
    } 
    const mapDispatchToProps = (dispatch) => { 
     return { 
     // .... is working fine 
     } 
    } 
) 
    return (
    <divHellow world</div> 
) 
} 

expoert default connect(mapStateToProps, mapDispatchToProps)(ChildrenComponent); 

Answer 1

ストアとその状態にアクセスしようとすると、特にReduxとReact-Reduxを使用する目的が完全に無効になります。 mapStateToPropsを使用して、特定のコンポーネントごとに必要なstateの部分にアクセスすることになっています。

Answer 2

コンポーネントクラスの外にmapStateToPropsとmapDispatchToPropsを配置し、コンポーネントクラスのrenderメソッド内にjsxを配置します。

class ChildrenComponent extends Component { 
    render() { 
    return (
     <divHellow world</div> 
    ) 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    // .... 
    } 
} 
const mapDispatchToProps = (dispatch) => { 
    return { 
    // .... 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(ChildrenComponent);