How include a Layout template in react router? - reactjs

Question

I am working in a react application using redux, react-router and react-router-redux. So it is a simple App and in this application I need use a simple, route view. I have read the documentation and can made mi route without problems, but at moment of added a Template at routes I had problems. I need pass the dispatched and State of the reducers to the views and the Template for can manipulate spinners and other elements in the Template. I don't sure the how make it or if I am making correctly.
Could you help me, please?
This is my router code:
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {Route} from 'react-router';
import {ConnectedRouter} from 'react-router-redux';
import {Switch} from 'react-router-dom';
import {store, history} from './store/index';
import Layout from './components/Layout';
import './bootstrap-3/css/bootstrap.min.css';
/* Components */
import Home from './components/abouts/home';
import About from './components/abouts/about';
import NoMatch from './components/abouts/nomatch';
import Artists from './components/artists';
const NodeId = document.getElementById('root');
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<Layout>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/artists" component={Artists}/>
<Route component={NoMatch}/>
</Switch>
</Layout>
</ConnectedRouter>
</Provider>, NodeId);
So I don't sure of how pass the redux State and the dispatched to component of route, So I am doing something like that in each component, I thing that there is one better form of do it.
import {connect} from 'react-redux';
import * as artistActions from './actions/artistActions';
import * as globalConfigActions from './actions/globalConfigActions';
class Abouts extends Component {
render() {
console.log('Abouts Component: ', this);
return (
<div>
<h1>About</h1>
</div>
);
}
}
const mapStaeToProps = (state) => {
return {
artist: state.artist,
globalConfig: state.globalConfig
}
};
const mapDispatchToProps = (dispatch) => {
return {
fetchArtist: () => {
return dispatch(artistActions.fetchArtist());
},
globalConfigActions: {
showSpinner: () => {
dispatch(globalConfigActions.showSpinner());
},
hiddenSpinner: () => {
dispatch(globalConfigActions.hiddenSpinner());
}
}
}
};
export default connect (mapStaeToProps, mapDispatchToProps)(About);
Of that form I can pass the State and the dispatched to component to each main component but I need pass the State and the dispatched to the Template, when I have tried do it with the template the routes doesn't work and the view doesn't change.
If I use one simple template without the "mapDispatchToProps" and "mapStaeToProps" of redux it works perfect but the layout doesn't have access to methods or state of redux.
Someone could say me how I can make it correctly, please?
Thank you very much