Props.store does not work on child components - reactjs

Question

please help.
this.props.store does not work on child components.
but the connect(mapStateToProps, mapDispatchToProps) ... is working fine.
why doesn't work only child components?
1. parent code (is working fine)
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. Children Component (is not working only '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

Trying to access the store and its state directly defeats the entire purpose of using Redux, and React-Redux in particular. You're supposed to use mapStateToProps to access parts of state that you need in each particular component.

Answer 2

Put mapStateToProps and mapDispatchToProps outside the component class and put your jsx inside the render method of your component class.
class ChildrenComponent extends Component {
render () {
return (
<divHellow world</div>
)
}
}
const mapStateToProps = (state) => {
return {
// ....
}
}
const mapDispatchToProps = (dispatch) => {
return {
// ....
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ChildrenComponent);