Root + branch mixin

[mdaverde]

I'm running into an issue where I need to show part of the state tree in a root component, which means I need to bind a couple of cursors in the root component. This lead me to try to use the root and branch mixins.

This leads to this.context.tree to be undefined because the tree that is currently being passed is through a prop not through the context.

[Yomguithereal]

Hello @milanlandaverde, can't you split your root component into hierarchical ones or even a dummy wrapper one serving as your app's top level component? Out of curiosity, could you develop your use case a little bit more? Why do you need the app's state directly at root level?

[mdaverde]

The dummy wrapper is what I'm currently using, but basically the use case is:

componentDidUpdate(prevState) {
  if (prevState.color !== this.state.color) { // these come from cursors
    // body background color DOM manipulation
  }
}

It just seemed like a root + branch mixin would help out.

[Yomguithereal]

I'll see whether I can fiddle something to make both mixins work together then.

[Yomguithereal]

Hello @milanlandaverde. I don't really find a way to make both mixins work together since the branch one relies on context and would fail if such context is not present.

You need a way or another to inject context throughout your application and since React.withContext disappeared, I don't really see another way than a dummy wrapper to do so.

On a side note, do you really need a react component to affect the background color of your whole body? Isn't this possible to do something of the kind:

tree.select('backgroundColorOrElse?').on('update', function(e) {
  var color = e.data;
  document.body.style.backgroundColor = color;
});

[Yomguithereal]

I am still thinking about this one. But a wrapper can still work.