So the requirement is to decouple as much as possible so that on deleting any integrated child components, the Parent won't crash. The idea is to create Parent component with root saga middleware having Headers, footers, side bars, does the authentication and authorization and runs the root sagas. The parent Component will integrate external independent Child components/projects which has its own set of Sagas and Api calls.

What I want to achieve To decouple the following and create ChildOne and ChildTwo in separate projects and finally integrate them in Parent project as a plugin or a library but again these plugins or libraries will have its own Saga and Api calls.

Reason to decouple The company has over 30+ new projects and all these are being handled by different developers. Hence we are trying to integrate all the 30+ project to the Parent project with an intention that if the one project breaks, the others will continue to run and also the Parent won't need to adjust itself if we integrate or delete any child components like in the following structure, if we remove ChildOne component, the project will break as the path i.e., "../components/store/childone/saga" will be invalid.

I wonder if this can be achieved using injectReducer({ key: 'cartContainer', reducer }) & injectSaga({ key: 'cartContainer', saga }); but again If you can provide an idea on how to use this and where to use this either on Parent or Children and how to integrate all the children with the Parent

I am quite new to the React World so I'd appreciate your feedback Thank you..

The Current project has the following structure.

RootSaga.js

import ParentSaga from "../components/store/parent/saga"
import ChildOneSaga from "../components/store/childone/saga"
import ChildTwoSaga from "../components/store/childtwo/saga"

export default function* rootSaga() {
  yield spawn([
    ParentSaga(),
    ChildOneSaga(),
    ChildTwoSaga()
  ])
}

Here is an example of routes.js

import Parent from "../components/parent/index"
import ChildOne from "../components/childOne/index"
import ChildTwo from "../components/childOne/index""

const Routes = [

  { path: "/", component: Parent },
  { path: "/child-one", component: ChildOne },
  { path: "/child-two", component: ChildTwo }

And this is my index.js

import rootReducer from "./reducers"
import rootSaga from "./sagas"
const sagaMiddleware = createSagaMiddleware()

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(sagaMiddleware))
)
sagaMiddleware.run(rootSaga)