使用 React 和 Saga 将子组件与父组件集成

Question

因此，要求尽可能多地解耦，以便在删除任何集成的子组件时，Parent不会崩溃。这个想法是用具有页眉、页脚、边栏的根saga中间件创建Parent组件，进行身份验证和授权，并运行根sagas。父组件将集成外部独立的子组件/项目，这些组件/项目有自己的一组Sagas和Api调用。

我想要实现的目标将以下内容解耦，在单独的项目中创建ChildOne和ChildTwo，并最终将它们作为plugin或library集成到Parent项目中，但这些plugins或libraries将有自己的萨加和阿皮呼叫。

脱钩的原因该公司有30多个新项目，所有这些都由不同的开发人员处理。因此，我们试图将所有30+项目集成到Parent项目中，目的是如果一个项目中断，其他项目将继续运行，并且如果我们集成或删除任何子组件，Parent也不需要自我调整，如以下结构中所示，如果我们删除ChildOne组件，项目将中断，因为路径即"../components/store/childone/saga"将无效。

我想知道使用injectReducer({ key: 'cartContainer', reducer }) & injectSaga({ key: 'cartContainer', saga });是否可以实现这一点，但同样，如果你能提供一个关于如何使用Parent或Children以及如何将所有children与Parent集成的想法

我是React World的新手，所以我很感谢您的反馈。谢谢。。

当前项目具有以下结构。

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

以下是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 }

这是我的index.js

import rootReducer from "./reducers"
import rootSaga from "./sagas"
const sagaMiddleware = createSagaMiddleware()
const store = createStore(
rootReducer,
composeEnhancers(applyMiddleware(sagaMiddleware))
)
sagaMiddleware.run(rootSaga)

Answer 1

虽然这不是直接回答您的问题：

首先，你在那里编写的Redux代码看起来已经过时了。您应该使用我们的官方Redux工具包包来编写Redux逻辑，而不是不推荐使用的原始createStoreAPI和手写的reducer逻辑。

多年来，我们一直建议在几乎所有情况下都不要使用西米。今天更是如此——RTK Query解决了数据获取用例；听众"；中间件通过更简单的API、更小的捆绑包大小和更好的TS支持，基本上完成了sagas所能做的一切。

有关更多详细信息，请参阅这些文档页面和帖子：

• https://redux.js.org/introduction/why-rtk-is-redux-today
• https://redux.js.org/tutorials/essentials/part-2-app-structure
• https://redux.js.org/tutorials/fundamentals/part-8-modern-redux
• https://redux-toolkit.js.org/api/createListenerMiddleware
• https://blog.isquaredsoftware.com/2022/06/presentations-modern-redux-rtk/
• https://blog.isquaredsoftware.com/2022/05/presentations-evolution-redux-async-logic/

最后，我们还有一个关于管理代码拆分的文档页面：

• https://redux.js.org/usage/code-splitting