CODEWITHSUNDEEP
reduxreact-redux
james emanon
james emanon

Reputation: 11807

Shared Redux Different App stores.. how?

I'm in a bit of head scratcher here. I have two apps. They are separate tools. BUT, one of the tool 1, uses part of tool 2. HOW can tool 1 get at and into tool 2 Redux state? Is there a middleware that enables me to bind them somehow.

TOOL APP1 --- has its own redux store TOOL APP2 --- has its own redux store

I need a behavior from APP2 for APP1. So, instead of "building" a new version, just import APP2's sub section and use that.... NOW, here is the rub. APP1 now needs to know how to set, and retrieve the states it stores in APP2 sub component....

Is there a methodology in place for redux to do this, or ?

Worse comes to worse, I guess I can store the APP2 sub component state in localStorage or redis etc.. and then I can hydrate APP1 with it.. but....

Upvotes: 4

Views: 4317

Answers (1)

kuy
kuy

Reputation: 964

Not so difficult.

You can do it by providing shared Container components (means wrapped by calling connect() of react-redux), shared Reducers, shared Actions (with Action Creators), and shared Middlewares. Then, you use Container components, insert Reducers, and apply Middlewares in your main application.

This is a demo app contains shared self-contained components.
https://github.com/kuy/popover-profile

Timeline App: Online Demo
Message App: Online Demo

Please hover username in the pages. You will get popup profiles.

These two apps share a Popover Profile component, like Gmail's or SoundCloud's profile tooltip on mouseover names. No only sharing state, this component communicates with (fake) API server. This can be done by a shared Middleware using redux-saga.

Upvotes: 1

Related Questions