/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
Yeah. 👍 Is the App/Container just an illustration of how this could work, or a recommendation for pages/snippets? I think there's maybe a way that all this can be condensed down to our existing redux patterns + a higher-order component that does the work: 'connect this component. If a parent store already exists, namespace this component's shit within that store. If no parent store already exists, then I'll just make a new store.'