Using reusable components with ReactJs and Flux with multiple stores

Question

In my company, we started our first project with ReactJs. Because in the end this might grow into a large system, we decided to use Flux to keep things organized. Although there are quite some examples, they mostly are not based on usage in a complex system.

One of the things that we would like to realize is a UI that makes use of widget-like components. For example, we have a component that displays information of a customer. This widget will be used on a tab-page with info of an invoice, but also on another tab-page with a customer card in the same browser window. And there will be some other components in which this widget will be used.

So I have a React component that should listen to a change event of a store. However this component itself does not know what store to listen to, because I can have an invoice store, but also another store that has customer info that should be displayed.

I found this question that gives some info on how to create a re-usable component, but it does not give some tips on how to use a component with multiple stores.

One thing that I consider is to pass the store to be used as a parameter into the re-usable component. Would this be a wise thing to do?

Thanks in advance for your reactions!

Answer 1

One way to go would be to handle all the data retrieval logic in a parent component. In that model, your CustomerCard component doesn't need to know how to retrieve its data, but expect it to be passed as props instead. This is a win for reusability since your CustomerCard component isn't tied to a specific data retrieval process anymore.

In your case, you could create one container component per store, and each one of them would return a <CustomerCard customerInfo={...} /> element in their render() method.