使用react-redux子应用程序？

Question

我有一个一般的架构react-redux问题是否使用子应用程序方法.

目前我们正在开发通用列表/详细信息视图.对于list-view,我们使用redux-saga检索数据并将它们保存到redux存储并将它们连接到列表组件.在分页/搜索时,我们触发一个刷新这些数据的操作.要求是,细节视图可以包含相关记录的列表视图(子列表).根列表视图和子列表在视觉上几乎相同,除非默认情况下搜索表单不可见,并且操作应该以不同方式工作(仅检索相关数据,行单击不应显示子列表中的详细信息...)

要解决这个问题,我可以想到两个解决方案:

-1-重用组件,共享商店

我们可以重用list-view容器.对于动态数量的子列表,我们必须在商店中存储具有id的数据.在分页等方面,我们必须替换正确的数据集.垃圾收集必须手动处理.

-2-子应用程序方法

如下所述:Isolated Subapps我们可以创建detail/list-view的隔离组件.如果我们想要一个子网格,我们只需要包含这个组件.这与我们用于根列表视图的相同.

PRO /缺点

对于子应用程序,我看到了自治的优势.数据可以保存在单独的商店中,我们不必在商店中实现"基于ID"的东西.我们可以销毁子应用程序,商店也会被删除.在缺点方面,一些数据正在根级检索,因为我们不希望子应用程序执行相同的REST调用来获取这些数据,我们需要找到一种方法将这些信息发送到子应用程序.并且行单击可能会对根视图产生影响(重定向)因此子应用程序需要发送数据并获取根元素的数据,因此不会像我希望的那样孤立.

有没有人用任何方法获得一些宝贵的经验？任何反馈将不胜感激!

Answer 1

经历:

在我工作的地方,我们有两个共享一些功能的大型Web应用程序.它们由11个不同的团队开发,分布在4个地理位置.

我们决定将这些网站分解为逻辑子应用程序(称为"微前端"),其中一个团队负责其开发.因此,尽可能与父应用程序分离对我们来说很重要(redux通常会帮助记录日志).

一些子应用程序将在两个站点中使用,这使得自治成为一个巨大的问题(不能保证父应用程序将以相同的组合构建存储,并且我们不希望强制它们必须) .

其他一些子应用程序不需要在两个站点中,但确实需要在同一站点的多个位置显示,具有不同的数据(类似于您的情况).

大多数子应用程序还必须在父应用程序选择的内容中显示其数据,或者使用已登录的安全令牌进行API请求,因此能够访问根存储也很重要.

我们还有一个想法来捕获分析和通过redux中间件进行日志记录,因此只需要一个商店来连接所有这些,这对我们也是有益的.

正如您现在可能已经知道的那样,我们想要两种方法的所有好处,因此我们创建了redux-subspace,其中"为什么不是两者兼而有之？" 哲学.

最后,我们使用它不仅实现了上面列出的所有目标,而且我们还开始进一步细分子应用程序,并使子应用程序由多个子应用程序组成,以进一步隔离特定功能.

终极版子空间

核心概念是拥有一个商店,但为您的子应用程序创建隔离的部分(子空间).还有用于访问根存储值的功能.

所以你可以做点什么

<Provider store={store}>
    <SubspaceProvider mapState={(state) => state.list1}>
        <ListView />
    </SubspaceProvider>
    <SubspaceProvider mapState={(state) => state.list2}>
        <ListView />
    </SubspaceProvider>
</Provider>

其中list1和list2是2个不同的数据集在店内的位置.

关于ListView组件的主要注意事项是它现在应该映射其状态,就好像提供的节点是存储的根节点并通过root节点访问根值.

例如

在子空间之前:

const mapStateToProps = state => {
    return {
        myList: state.list1.items
        rootValue: state.rootValue,
    }
}

子空间之后

const mapStateToProps = state => {
    return {
        myList: state.items
        rootValue: state.root.rootValue,
    }
}

注意:操作有一个命名空间功能,但不支持redux-sagas(尚未).它可以命名从子空间内调度的命名空间,因此这可能是也可能不是您的问题(取决于您的应用程序的实现细节).

免责声明:我是redux-subspace的主要贡献者.