【问题标题】:Handling dependencies in Redux Store data处理依赖于终极版存储数据
【发布时间】:2017-12-16 17:35:19
【问题描述】:

我和我的团队正忙于设计一个 redux 商店,包括所有可以触发的动作。由于我们应用程序的性质,我们在 redux 存储的不同节点(分支?)之间存在一些固有的耦合/依赖关系。我们以最具可扩展性的方式处理这些依赖关系的想法是将其提取到状态树中自己的单独节点。让我举一个简化的例子来说明我们想到的结构,并解决我们面临的问题:

假设我们的状态树有以下内容:

  • SectionA:将数据 A 作为布尔值
  • SectionB:数据 B 为 int
  • DependencySection:如果 A 为真,则 B 必须为 10 或更大的依赖项

您可能在想,为什么要这样做?为什么不直接将依赖项集成到 SectionB 的 reducer 中?原因是这些依赖项因客户端而异,我们从数据库中读取它们。它可以将状态树的任何部分链接到任何其他部分,并有自己需要执行的操作。

现在,我的问题是,我们如何在考虑这些依赖关系的同时减少操作?如果我们的申请流程是:

  1. 用户导致 TOGGLE_DATA_A 操作
  2. SectionA reducer 更新数据 A
  3. DependencySection 根据依赖关系更新数据 B

如果我们引入一个 SectionC,其中数据 C 依赖于数据 B,会发生什么?当 DependencySection 更新数据 B 时,似乎需要触发一个新操作,该操作是数据 B 已更新。这意味着在减少另一个动作的同时触发一个动作,这显然是不允许的。或者,让不同的 reducer 部分以非常特定的顺序执行似乎也可以解决问题,但这肯定是一种反模式。

我们能想出的唯一解决方案是让中间件在每次操作后重复触发 UPDATE 操作,直到状态不再改变。例如,在 TOGGLE_DATA_A 操作更新数据 B(通过对数据 A 的依赖)之后,下一个 UPDATE 操作将更新数据 C(通过对数据 B 的依赖),而下一个 UPDATE 将不更新任何内容,从而停止循环。这很hacky。

那么,有没有更好的方法来处理减少这种依赖状态?或者我们应该以不同的方式构建我们的状态树?

【问题讨论】:

    标签: redux flux


    【解决方案1】:

    Redux 背后的一个关键概念是 reducer 逻辑只是函数,如果您需要按特定顺序对状态更新处理进行排序,您可以自己编写显式代码那。所以不,“让不同的 reducer 部分按特定顺序执行”不是“反模式”,它绝对是 Redux 的一种有效且受鼓励的方法。

    在 Redux 文档的 Structuring Reducers - Beyond combineReducers 部分以及我的博客文章 Idiomatic Redux: The Tao of Redux, Part 1 - Implementation and IntentPractical Redux, Part 7: Feature Reducers 中有这种方法的示例和讨论。我将粘贴一个基本的假设示例:

    export function commentsReducer(state = initialState, action, hasPostReallyBeenAdded) {}
    
    // elsewhere
    export default function rootReducer(state = initialState, action) {
      const postState = postsReducer(state.post, action);
      const {hasPostReallyBeenAdded} = postState;
      const commentState  = commentsReducer(state.comments, action, hasPostReallyBeenAdded);
      return { post : postState, comments : commentState };
    }
    

    【讨论】:

    • 啊,我明白了。我显然太沉迷于 combineReducers 的单一用例。感谢您提供非常有帮助的答案和示例。
    • 当然。是的,combineReducers 是构建 reducer 逻辑的鼓励默认方法,但您也应该随时为您的用例编写自定义逻辑。
    猜你喜欢
    • 2014-09-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多