小编and*_*ent的帖子

我正在开发一个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: { …