/containers/App.jsx
import { Provider } from 'react-redux'
import Widget, { createStore as widgetStore } from 'components/Widget'
import Something, { createStore as somethingStore } from 'components/Something'
export default () => {
onComponentDidMount() {
this.setState({
stores: {
widget: widgetStore(),
something: somethingStore()
}
})
},
return (<div>
<Provider store={ this.state.stores.widget } />
<Widget />
</Provider>
<Provider store={ this.state.stores.something } />
<Something />
</Provider>
</div>)
}/connect-widget.js ?
export default (widgets, component) => {
// return new component that abstracts boilerplate of setting state for widget stores
}/components/Widget/index.jsx
import configureStore from './configure-store'
export const createStore = (config) => {
// config things as needed? like providing hooks for outside actions?
return configureStore()
}
export default Widget
Just an illustration on how it could work.
if
Widget.createStorereplace occurrences ofWidgetinApp.childrenw/ a<Provide store={ this.state.stores.widget }><Widget></Provide>or something.