Redux colocate component & data

.js

// Component5.js
const _Component5 = ({ props: {foo5, bar5}}) => (
  <div>
    <span>{foo5}</span>
    <span>{bar5}</span>
  </div>
)

const mapStateToProps = (state) => ({ foo5: state.foo5, bar5: state.bar5 })
export const Component5 = connect(mapStateToProps, null)(_Component5)


// Component4.js
const _Component4 = ({ props: {foo4, bar4}}) => (
  <div>
    <span>{foo4}</span>
    <span>{bar4}</span>
  </div>
)

const mapStateToProps = (state) => ({ foo4: state.foo4, bar4: state.bar4 })
export const Component4 = connect(mapStateToProps, null)(_Component4)

// Component3.js
const _Component3 = ({ props: {foo3, bar3}}) => (
  <div>
    <span>{foo3}</span>
    <span>{bar3}</span>
  </div>
)

const mapStateToProps = (state) => ({ foo3: state.foo3, bar3: state.bar3 })
export const Component3 = connect(mapStateToProps, null)(_Component3)

// Component2.js
const _Component2 = ({ props: {foo2, bar2}}) => (
  <div>
    <span>{foo2}</span>
    <span>{bar2}</span>
  </div>
)

const mapStateToProps = (state) => ({ foo2: state.foo2, bar2: state.bar2 })
export const Component2 = connect(mapStateToProps, null)(_Component2)

// Component1.js
const _Component1 = ({ props: {foo1, bar1}}) => (
  <div>
    <Component4 />
    <Component3 />
    <span>{foo1}</span>
    <span>{bar1}</span>
  </div>
)

const mapStateToProps = (state) => ({ foo1: state.foo1, bar1: state.bar1 })
export const Component1 = connect(mapStateToProps, null)(_Component1)

// Component0.js
const _Component0 = ({ props: {foo0, bar0}}) => (
  <div>
    <Component1 />
    <Component2 />
    <Component3 />
    <span>{foo0}</span>
    <span>{bar0}</span>
  </div>
)

const mapStateToProps = (state) => ({ foo0: state.foo0, bar0: state.bar0 })
export const Component0 = connect(mapStateToProps, null)(_Component0)

// App.js
ReactDOM.render(<Component0 />, document.querySelector('#mount'));