如何处理Redux Reducer和Action中的跨领域问题

Question

给定一个类似该问题的用例：

用拆分化简器更新相关状态字段的最佳方法？

处理依赖于自身状态之外的状态的减速器中的动作的最佳实践是什么？上面问题的作者最终只是将整个状态树作为第三个参数传递给每个化简器。这似乎是徒劳的和冒险的。Redux常见问题解答列出了以下潜在解决方案：

• 如果化简器需要从另一个状态片中了解数据，则可能需要重新组织状态树的形状，以便单个化简器可以处理更多数据。
• 您可能需要编写一些自定义函数来处理其中的某些操作。这可能需要用您自己的顶级reducer函数来替换CombineReducers。
• 您还可以使用诸如reduce-reducers之类的实用程序来运行CombineReducers来处理大多数操作，还可以为跨状态切片的特定操作运行更专业的reducer。
• 异步动作创建者（如redux-thunk）可以通过getState（）访问整个状态。动作创建者可以从状态中检索其他数据并将其放入动作中，以便每个化简器具有足够的信息来更新其自己的状态片。

在我的用例中，我有一个“继续”操作，该操作确定用户可以在多表单/多步骤流程中进入哪个页面，并且由于这在很大程度上取决于整个应用程序的状态，因此我无法在任何我的儿童减速器中进行处理。目前，我已经将商店纳入动作创建者。我使用商店的当前状态来计算一个操作对象，该对象将触发我的“页面”减速器，从而更改活动页面。我可能会在这个动作创建者中安装redux-thunk并使用getState（），但是我还没有致力于这种方法。

我猜这对解决方案来说还算不错，因为（到目前为止）只有一个动作必须以这种方式处理。我只是想知道是否有更好的解决方案，或者是否有一种方法可以重新构造我的状态和化简器以使其变得更容易，或者我在做的事情是否属于Redux的最佳实践。如果有任何类似的例子，那也将有所帮助。

为了提供更多的上下文，我的状态树当前如下所示：

{
  order: order.result,
  items: order.entities.items,
  activePage: {
    id: 'fulfillment'
    // page info
  },
  pagesById: { // all the possible pages
    fulfillment: {
      id: 'fulfillment'
      // page info
    }
  }
}

活动页面是用户必须在其中输入数据才能进入下一页的页面/部分。确定活动页面几乎总是取决于项目状态，有时取决于订单状态。最终结果是一个应用程序，用户可以在其中连续填写一些表格，一旦表格有效就点击继续。在继续上，应用程序确定所需的下一页并显示它，依此类推。

编辑：我们已经尝试了与子减速器结合实现“全局”减速器的方法。

实现是这样的...

const global = (currentState = initialState, action) => {
  switch (action.type) {
    default:
      return currentState
  }
}


const subReducers = combineReducers({
  order,
  meta
})

export default function (currentState = initialState, action) {
  var nextState = global(currentState, action)
  return subReducers(nextState, action)
}

全局化简器首先在整个应用程序状态上运行，然后将其结果馈送到子化简器。我喜欢这样的事实，我不再在动作创建者中投入大量逻辑，而只是为了读取状态的不同部分。

我相信这与redux的原则是一致的，因为每个动作仍会击中每个化简器，并且化简器的调用顺序始终是相同的。对这个实现有什么想法吗？

编辑：我们现在正在使用路由器库来处理页面状态，因此activePage和pagesById都消失了。

Answer 1

如果 state.activePage 依赖于 state.order 和 state.items，您可以订阅商店，并且如果对“order”或“items”进行修改，则调度一个“checkPage”操作，该操作可以在必要时设置另一个活动页面。一种方法应该连接“顶级组件”订单和项目，监听它们的值并更改活动页面/重定向

不容易理解您的担忧，希望我的留言对您有所帮助。祝你好运