Cerebral with React and stateless function

[josterholt]

Cerebral with React and stateless function

[christianalfoni]

Hi @shroder!

Thanks for reporting this. I see in your example you are bringing in "mixin" twice. Both by composing and using the "mixins" property. Might that be it?

If not, this might just be something Cerebral should handle. Though if it fails with Cerebral, it probably fails with a lot of other existing projects. There is nothing special to this mixin really.

But okay, let me know about the composing and using mixin property and we go from there? :-)

[josterholt]

Hi @christianalfoni,

The mixins property you see is being ignored, at least I'm 99% sure. It's why I'm using the compose method. From what I recall, the mixins property doesn't actually get used. I think it's because React.createClass handles that normally. I'll try to double check this evening.

[ericelliott]

@shroder , I think the problem is that mixins are not supported using the new ES6 class support (which is also the feature that makes pure functions work).

I wonder if you could wrap Cerebral into a react stamp and compose cerebral with your component. I haven't tried this yet. =)

[ericelliott]

@shroder Or just try deleting line 7?

   mixins: [mixin],

[josterholt]

The mixins property definitely isn't being used. Tested out my app without it and got the same error.

It looks like the mixin was moved to cerebral-react-immutable-store? My project is now behind version-wise, so I think I should update my packages to use the most recent versions of all my packages.

I have some other findings with 0.9.0, but I'll first see if it's still relevant after the upgrade.

[christianalfoni]

Great! Let us know how it went :-)

[ericelliott]

@christianalfoni Have you tried using cerebral with react-stampit?

[christianalfoni]

Hi there!

did a small test now, and it works just fine it seems?

import {Mixin} from 'cerebral-react-immutable-store';
const MyComp = stampit(React, {
  getStatePaths() {
    return {key: ['path']}
  },
  render() {
    return (
      <div>Hello {this.state.key}</div>
    );
  }
}).compose(Mixin);

So make sure you import the Mixin correctly, it is a property on the Controller. As it uses the Mixin the state will be availalbe on the state object of the component, not props.

If it still does not work I think we have to work on a specific example :-) But yeah, I tried it and it worked on my end

[ericelliott]

👍

[christianalfoni]

Closing this as it seems to have worked out :-)