0

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

应用程序详细信息: 带有 AngularJS 的 SPA。其他库使用ng-reduxreselectrxjs

组件详细信息: 可重用的网格组件以呈现大量数据。

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

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

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

  3. 一些组件,如搜索、排序以及拥有自己的状态,也会影响其他组件的状态。例如:设置查询参数(searchText、sortOrder 等)以获取将由另一个组件处理的网格数据。

我的想法:

  1. 对于第一点,我正在研究重新选择以提供相关的状态切片。

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

  3. 对于第三点,我正在考虑以下方法:

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

    湾。组件A触发其自己的操作来更新其状态部分,然后为另一个组件B触发另一个操作以更新其状态片。这种方法也感觉像打破了 Redux 的整个想法,虽然我不知道如何使用它,但可以在这里使用副作用的概念,也许是redux-sagaredux-thunk等。

注意:使用任何一种方法都不应该导致组件知道其他组件,因此任何必须做的事情都将通过传递一个通用的配置对象来完成,例如{ actionsToFire: ['UPDATE_B'] }.

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

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

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

我已经知道的几件事是:

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

  2. 我知道 Smart 和 Dumb 组件,主要是我的组件可能看起来很聪明(即知道应用程序状态),但这就是我想要保留它们的方式,我可能错了。

网格组件示意图:

网格组件图

4

1 回答 1

0

Redux 的全局存储使得封装和动态即插即用行为变得更加困难,但这是可能的。实际上有许多现有的库用于每个组件实例的状态reducers 的动态注册。(也就是说,到目前为止我看到的用于组件管理的库都是 React 库——你必须研究其中的一些并自己重新实现一些东西才能与 Angular 一起使用。)

于 2017-10-29T18:03:43.173 回答