Integrate Child with Parent Components using React & Saga

Marc Henry 0
Viewed 27

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)
react-hooks react-redux redux reactjs javascript
1 Answers

While it's not a direct answer to your question:

First, it looks like the Redux code you're writing there is very outdated. You should be using our official Redux Toolkit package to write Redux logic, rather than the deprecated original createStore API and handwritten reducer logic.

We have been recommending against use of sagas in almost all cases for years now. This is even more true today - RTK Query solves the data fetching use case, and the new RTK "listener" middleware does basically everything sagas can with a simpler API, smaller bundle size, and better TS support.

Please see these docs pages and posts for more details:

And finally, we also have a docs page on managing code splitting:

markerikson0
Related