React reusable component - no MIXINS?


#1

After going through a ‘meteor with react’ tutorial, which explained the use of mixins (and after understanding how it works clearly!), I later found the below noted writeup at https://facebook.github.io/react/docs/reusable-components.html

“Unfortunately ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes. Instead, we’re working on making it easier to support such use cases without resorting to mixins.”

So, what is the best alternative to choose now?


#2

Mixins are going away. They still work with the .createClass method of creating components but most people now are moving to ES2015 classes or the even newer functional/stateless components. Container components should be used now using createContainer in core:

Instead of using getMeteorData on your component, you instead create a container component which is reactive and can pass data down via props. It also allows you to keep all your data fetching away from your presentational component.


#3

But if I need some information from Redux store for subscriptions, then I have to create one more container for this container?! Or… any suggestions?


#4

That’s right. You need a container for your container.

If you’re using Redux you can use react-reduxs connect() to create a container to your createContainer container… if that makes sense. So your components will be like:

Redux Container -> Meteor Container -> Presentation component

Please don’t make me say container again :slight_smile:


#5

I thought so … but a container for container makes me crazy (-:


#6

Just wait until you’re creating a container container container container. Then you have problems.


#7

Docker Container -> Redux Container -> Meteor Container -> Presentation Component

Bam.


#8

Containers are so hot right now.


#9

BTW if you don’t want to use Redux, you could just create a ReactiveVar and sync your Redux store into there, then just read from that var in your component? Although I just came up with that idea 15 seconds ago so I don’t know what the implications are.


#10

Bump on this. What is the recommended way to create a component, reactive to data, without using mix-ins? The guide’s react-meteor-data has a mix-in as a dependency unfortunately (unless I am missing something?).

Thanks to anyone who can point me in the right direction!


#11

There is no problem with having mixins in a library implementation. Dan Abramov is warning against heavily using mixins in your app code, because that gets confusing. I think createContainer meets the requirements.


#12

Cheers thanks @sashko !