Skip to content

Instantly share code, notes, and snippets.

@derekr
Created February 19, 2016 22:34
Show Gist options
  • Select an option

  • Save derekr/b8c849fdd8ed0611be2e to your computer and use it in GitHub Desktop.

Select an option

Save derekr/b8c849fdd8ed0611be2e to your computer and use it in GitHub Desktop.

/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
@georgebonnr
Copy link
Copy Markdown

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.'

@derekr
Copy link
Copy Markdown
Author

derekr commented Feb 19, 2016

Just an illustration on how it could work.

connectWidgets({
    widget: Widget,
    something: Something
}, App)

if Widget.createStore replace occurrences of Widget in App.children w/ a <Provide store={ this.state.stores.widget }><Widget></Provide> or something.

@derekr
Copy link
Copy Markdown
Author

derekr commented Feb 19, 2016

Yeah I like the idea of store on demand + name spacing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment