import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

// Actions
import {open, close} from 'actions' // Redux Actions

// Components
import Middle from 'components/middle/middle.jsx'

/**
 * @params {Object} state
 * @params {Object} params => Optional, url params for example
 */
const mapStateToProps = (state, {params}) => ({
  store: {
    middleDatas: state.middleDatas
  },
})

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators({open, close}, dispatch)
})

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Middle)

import React from 'react'

const Middle = ({ props, store, components, params, actions}) => {
  const {middleDatas} = store
  const {Leaf} = components
  const {someId} = params // Optional => url params 
  const {close} = actions
  const {someFunction, title} = props

  return (
    <div className="Middle">
      {title}
      <button onClick={close}>Close</button>
      <button onClick={someFunction}>someFunction</button>
      {middleDatas.map(...)}
      {Leaf}
    </div>
  )
}

export default Middle

import React from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

// Selectors
import {getSomeDataFromSomeId} from 'selectors/data'

// Actions
import {open, close} from 'actions' // Redux Actions

// Components
import ViewName from 'views/viewName/viewName.jsx'

/**
 * @params {Object} state
 * @params {Object} params => Optional, url params for example
 */
const mapStateToProps = (state, {params}) => ({
  store: {
    datas: getSomeDataFromSomeId(params.someId)
  },
})

export default connect(
  mapStateToProps,
)(ViewName)

import Leaf from 'components/leaf/leaf'
import Middle from 'components/middle/middle'
import Root from 'components/root/root'

const ViewName = ({params, store}) => {
  const {someId} = params // Optional => url params 
  const {datas} = store
  
  const someFunction = () => {
    // do something...
  }
  
  const LeafComponent = <Leaf props={{title: "LeafComponent title"}}/>
  const MiddleComponent = <Middle params={{params}} components={{Leaf}} props={{title: "Component title", someFunction}}/>
  const RootComponent = <Root components={{Root}} props={{title:"RootComponent title"}}/>
  
  return (
    <div className="ViewName">
      {RootComponent}
    </div>
  )
}

export default ViewName