create one single redux container for multiple components

Question

I am creating a ReactJS/Redux application where a set of similar components need the same state and dispatch props from the store. Instead of creating several identical containers for all these components, I would like to create one single redux container for multiple components. What is the best approach for such scenario?

Slawa Eremin Slawa Eremin · Accepted Answer · 2017-10-23T07:47:10

I think, using function expression as a wrapper for connect is a good way for that;

function mapStateToProps(state){
  return {
    a: state.a,
    b: state.b
  }
}

export const wrapper = (Component) => {
  return connect(mapStateToProps, {})(Component)
}

using:

import {wrapper} from './source'

const Main = ({a, b}) => (
   <div>{a} - {b}</div>
)

export default wrapper(Main);

create one single redux container for multiple components

1 Answers