javascript - 如何组合具有依赖状态的 redux reducer

Question

我正在开发一个 React/Redux 应用程序，它允许将“小部件”添加到页面并在 2D 空间中进行操作。要求可以一次选择和操作多个小部件。我当前状态树的简化版本如下所示...

{
  widgets: {
    widget_1: { x: 100, y: 200 },
    widget_2: { x: 300, y: 400 },
    widget_3: { x: 500, y: 600 }
  },
  selection: {
    widgets: [ "widget_1", "widget_3" ]
  }
}

我目前有这棵树由 2 个 reducer 管理，一个管理 widgets 状态，另一个管理 selection 状态。选择状态缩减器可以简化为(注意:我也在使用 Immutable.js)...

currentlySelectedWidgets(state = EMPTY_SELECTION, action) {
  switch (action.type) {
    case SET_SELECTION:
      return state.set('widgets' , List(action.ids));
    default:
      return state
  }
}

这一切似乎工作得很好，但我现在有一个要求，我正在努力适应这个模型......

出于 UI 目的，我需要让当前选择具有 x/y 属性，该属性反射(reflect)当前所选小部件的左上角 x/y 坐标。示例状态可能看起来像...

{
  widgets: {
    widget_1: { x: 100, y: 200 },
    widget_2: { x: 300, y: 400 },
    widget_3: { x: 500, y: 600 }
  },
  selection: {
    x: 100,
    y: 200,
    widgets: [ "widget_1", "widget_3" ]
  }
}

这里的逻辑相当简单，例如找到所有选定小部件的 min() x 和 y 值，但我不确定我应该如何在 reducer 组合方面处理这个问题因为 currentlySelectedWidgets reducer 无法访问状态树的 widgets 部分。我考虑过...

• 将 reducer 合并为一个 reducer:这似乎不是一个很好的可扩展解决方案。
• 通过操作传递当前的小部件列表:这看起来特别讨厌。
• 寻找一种更好的方法来为状态树建模:我有一个想法，但任何替代版本似乎都有其他缺点。
• 构建自定义 combineReducers()，它可以将小部件列表作为附加参数提供到我的 currentlySelectedWidgets() reducer 中:我认为这可能是我最好的选择。

我很想听听关于其他人如何管理类似情况的任何其他建议，似乎管理“当前选择”一定是其他人必须解决的常见状态问题。

Answer 1

这是 Reselect 的一个很好的用例:

创建一个选择器来访问您的状态并返回派生数据。

举个例子:

import { createSelector } from 'reselect'

const widgetsSelector = state => state.widgets;
const selectedWidgetsSelector = state => state.selection.widgets;

function minCoordinateSelector(widgets, selected) {
  const x_list = selected.map((widget) => {
    return widgets[widget].x;
  });

  const y_list = selected.map((widget) => {
    return widgets[widget].y;
  });

  return {
    x: Math.min(...x_list),
    y: Math.min(...y_list)
  };
}

const coordinateSelector = createSelector(
  widgetsSelector,
  selectedWidgetsSelector,
  (widgets, selected) => {
    return minCoordinateSelector(widgets, selected);
  }
);

coordinateSelector 现在可以访问您的 min x 和 y 属性。上面的选择器只会在 widgetsSelector 或 selectedWidgetsSelector 状态改变时更新，这使得这是一种非常高效的方式来访问你所追求的属性并避免在你的状态树中重复.