In ReactJS how to integrate core and local (project specific) components as a plugin

Question

I'm building an applications front-end using ReactJS and redux state container. This app (core) is going to be reused in some various projects in some of which I will need some additional features / extensions (plugin). These need to be separated from the core. The app and extensions are rendered on client's browser (I'm not pre-rendering anything on the server).

I'm looking for a way to:
a) create an "thrird party" plugin which can access the core apps state
b) render an "thrird party" plugin component from within the core app

Any ideas?
Thanks ;)

Answer 1

@romek from what I understand is that your use case sounds like a classic case of scaling ( modularity ) your software. What I'd suggest is that having a clear understanding of the parts involved in making a component / container work. These are ( as per my experience ) -

1. Reading data from the store ( selectors ).
2. Writing data to the store ( reducers ).
3. Handing other side-effects / interactions ( thunk or sagas).
4. The actual component which consumes these modules.

Now once you've identified all these pieces ( or more ), you make every 3rd party component confer / implement this design. Now you just need to import the component and render it.

Hope this helps!