CODEWITHSUNDEEP
javascriptreactjsredux
omen
omen

Reputation: 49

Multiple redux stores in single component

I have been entered into react project which uses multiple redux stores.

There many kind of interfaces: tabs, context, popups and other. And architect of this project decide to split this store to make this project more faster.I cant change architecture, and have to work as it does.

And sometimes I encounter situations, when component needs subcribing to 3 stores. And It's terrible pain, because first comes from provider, second from props component

        const { someProps } = this.props;

        return (
                <Provider store={SomeStore}>
                    <Route  <Component props={someProps} />
                </Provider>
        )

and third from State = { store.subsribe }.

this.state = Store.getState();
Store.subscribe(() => this.setState(Store.getState()));

Is it there any possibility to merge multiple stores into one component in a single style?

Upvotes: 3

Views: 1603

Answers (1)

zmii
zmii

Reputation: 4277

you can create some kind of Facade or Proxy - basically HOC that will encapsulate all changes and respond to changes either in props, or in store or elsewhere.

I think you can make it similar to Redux store, where main object has properties that represent different data sources/states, that are created by different reducers.

Inside your Component you could pass state further down with

  1. props change
  2. state provided by Provider update
  3. react on reactive data source changes

If you work in some isolated area - you can wrap it with this HOC and pass down all data merged from all data sources as prop e.g. called store.

Upvotes: 1

Related Questions