如何为高度解耦、即插即用的复杂组件构建 Redux？

Posted 2023-02-22

【中文标题】如何为高度解耦、即插即用的复杂组件构建 Redux？

【英文标题】：How to structure Redux for a highly de-coupled, plug-n-play complex component?

【发布时间】：2018-04-10 12:49:16

【问题描述】：

我对 Redux 很陌生，想在我的应用程序中使用它，但我在 Redux 部分的架构/设计阶段陷入困境。以下是我对设计的要求和假设。

申请详情： 带有 AngularJS 的 SPA。使用的其他库 ng-redux、reselect、rxjs。

组件详情： 可重复使用的网格组件来渲染大量数据。

我的想法： 创建一种即插即用的基于组件的架构，其中网格的所有内部组件都独立于父/组合组件，例如搜索、排序、行、标题、单元格。

所有组件都将拥有自己的一组 reducer、action、selector 和 store 中的 state slice。

因为所有组件都有自己的reducer，并且可以按需插入，所以我需要他们懒惰地注册到store，而不是在一个地方堆积。

某些组件，如搜索、排序，有自己的状态，也会影响其他组件的状态。例如：设置查询参数（searchText、sortOrder 等）以获取将由其他组件处理的网格数据。

我的想法：

对于第一点，我正在研究 reselect 以提供相关的状态切片。

对于第二点，我仍然对使用 combineReducers/replaceReducer 进行延迟注册感到困惑。如果我想访问该州的多个部分，我觉得 combineReducers 不适合。

对于第三点，我正在考虑以下方法：

一个。通过 getState() 传递整个状态以更新状态的多个部分。虽然这种方法让我感觉 Redux 使用不当。

b.组件 A 触发它自己的动作来更新它们的状态部分，然后另一个动作被触发给另一个组件 B 来更新它的状态片段。这种方法也感觉打破了 Redux 的整体理念，side-effect 的概念可以在这里使用，虽然我不知道如何使用它，也许 redux-saga em>、redux-thunk 等

注意：使用任何一种方法都不应该导致组件知道其他组件，因此任何必须做的事情都将通过传递像 actionsToFire: ['UPDATE_B'] 这样的通用配置对象来完成。

我需要在应用程序页面之间来回导航时进行状态管理，但我不需要从服务器端热重载、动作重放或预取应用程序状态。

组件也将负责在不再需要时销毁其状态。并且状态将具有规范化的结构。

我知道这些要求可能看起来很奇怪或不常见，但我会保持这种状态。

我已经知道的几件事是：

我不需要像 Dan 的经典文章所说的那样使用 Redux，但我认为在这种情况下我需要它。

我知道 Smart 和 Dumb 组件，大部分我的组件可能看起来很聪明（即知道应用程序状态），但这就是我想要保留它们的方式，我可能错了。

网格组件示意图：

Grid Component Diagram

【问题讨论】：

如果您有同一个组件类的多个实例，您需要一种在全局状态下识别它们的方法（例如使用 id）。我不知道你是否在设计中考虑到了这一点

@bitstrider 是的，我已经考虑过了，我将在需要的地方使用命名空间或 ID。

【参考方案1】：

Redux 的全局存储使封装和动态即插即用行为变得更加困难，但这是可能的。实际上有many existing libraries for per-component-instance state 和dynamic registration of reducers。 （也就是说，到目前为止我看到的用于组件管理的库都是 React 库——你必须研究其中的一些并自己重新实现一些东西才能与 Angular 一起使用。）