How to pass immutable data structures from stores to components?

[cr0cK]

Hi,

I would like to use Immutable.js and I have the following problem.

If I understand correctly how to use Immutable, I should keep immutable data structures from "source" to "destination" in order to avoid JS objects deep comparisons in the shouldComponentUpdate() method of my components.

So, I have tried to instanciate immutable datastructures in my stores but if getStateAsObject() doesn't return a JS object, the props of my components seem not be updated and are undefined.

For example: If this.state.myObject in my store is an Immutable.Map, this.props.myObject is undefined in the render function of my component. Of course, I use connectToStores to link the component to the store.

If getStateAsObject returns an object (this.state.toJS() for example), everything works fine again.

For me, it's important to keep immutable data structures from stores to components, without JS objects convertions, because I think we lost all the benefits of immutable data structures if we do stuff like that in the shouldComponentUpdate:

shouldComponentUpdate(nextProps) {
  return Immutable.is(Immutable.fromJS(this.props.myObject), Immutable.fromJS(nextProps.myObject));
}

Recreating two new structures just to be able to check the equality with is() seems not the good way to use Immutable.js.

What do you think? Please, say me if I am wrong.

Thank you.

[cr0cK]

Ok, I don't use an immutable map for all the state but just for each property in my store. It seems ok.

I close this issue.