Using `connect()` with `Immutable.Map` state object

My store is an Immutable.Map object, and I would like to pass it down my tree of React components. I suppose that in most cases I can get good performance by using something like PureRenderMixin (or ES2015 equivalent) when doing so.

I started out simple decorating my App class with @connect(state => state), and I got this error:

“Uncaught Error: Invariant Violation: mapStateToProps must return an object. Instead received Map {…”

I’m able to do something like @connect(state => {return {state};}), and then unwrap the object in App’s render(), but I get the sense that this is not an ideal solution.

[gaearon]

Indeed, as @gnoff said above, you can’t just return Immutable object because we spread over the values you return, and this wouldn’t make sense with Immutable.

I’m able to do something like @connect(state => {return {state};}), and then unwrap the object in App’s render(), but I get the sense that this is not an ideal solution.

The idiomatic way is to do this:

connect(state => ({
  stuff: state.get('stuff'),
  otherStuff: state.get('otherStuff')
})

only for the fields you actually care about, so @connect can bail out when the parts the component doesn’t need, did not change. I don’t suggest using toJS() because AFAIK it’s deep, but deep conversions won’t be as performant as just extracting the stuffy you want.

I also consider using several @connect() a bit higher up the tree, instead of one at the root component.

This is the way to go, and it’s more performant than just one @connect at the top.

[gaearon]

btw if you’re concerned about performance, make sure you check out reselect and Computing Derived Data.