如何用依赖状态组成redux减速器

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个reducers管理,一个是管理widgets状态,另一个是管理selection状态.选择状态reducer可以简化为(注意:我也使用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属性,该属性反映当前所选小部件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组合方面处理这个,因为currentlySelectedWidgetsreducer无法访问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现在可以访问你的分x和y性质.上述选择器将只在已更新的widgetsSelector或selectedWidgetsSelector状态的变化,使之成为一个非常高性能的方式来访问你以后和你的州树避免重复的属性.

Answer 2

如果您使用 thunk 中间件（https://github.com/gaearon/redux-thunk），您可以将SET_SELECTION操作设为 thunk，这将允许它在发送由您的减速器接收的调度之前读取整个状态。

// action creator
function setSelection(selectedWidgetId) {
    return (dispatch, getState) => {
        const {widgets} = this.getState();
        const coordinates = getSelectionCoordinates(widgets, selectedWidgetIds);

        dispatch({
            type: SET_SELECTION,
            payload: {
                widgets: selectedWidgets,
                x: coordinates.x,
                y: coordinates.y
            }
        });
}

通过这种方式，您可以在选择缩减器中获得所需的所有信息，而无需将所有小部件对象的列表传递给您的操作。