Por lo tanto, el requisito es desacoplar tanto como sea posible para que al eliminar cualquier componente secundario integrado, el elemento principal no se bloquee. La idea es crear un componente principal con middleware de saga raíz que tenga encabezados, pies de página, barras laterales, realice la autenticación y autorización y ejecute las sagas raíz. El componente principal integrará componentes/proyectos secundarios independientes externos que tienen su propio conjunto de llamadas Sagas y Api.

Lo que quiero lograr Para desacoplar lo siguiente y crear ChildOne y ChildTwo en proyectos separados y finalmente Parent en el proyecto principal como un plugin o una library pero nuevamente estos plugins o libraries tendrán sus propias llamadas Saga y Api.

Razón para desvincularse La compañía tiene más de 30 proyectos nuevos y todos estos están siendo manejados por diferentes devops. Por lo tanto, estamos tratando de integrar todo el proyecto Parent al proyecto principal con la intención de que si un proyecto se rompe, los otros continuarán ejecutándose y también el Parent no necesitará ajustarse si integramos o eliminamos cualquier componente secundario. Al igual que en la siguiente estructura, si eliminamos el componente ChildOne , el proyecto se romperá porque la ruta, es decir, "../components/store/childone/saga" no será válida.

Me pregunto si esto se puede lograr usando injectReducer({ key: 'cartContainer', reducer }) & injectSaga({ key: 'cartContainer', saga }); pero nuevamente, si puede proporcionar una idea sobre cómo usar esto y dónde usarlo, ya sea en Parent o Children y cómo integrar a todos los children con el Parent

Soy bastante nuevo en React World, por lo que agradecería sus comentarios. Gracias.

El proyecto Actual tiene la siguiente estructura.

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()
 ])
}

Aquí hay un ejemplo de rutas.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 }

Y este es mi index.js

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

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