Question

我知道最佳做法是不使用redux存储来保存任何类型的可视化相关数据。但我认为没有办法在我的项目中避免这种情况。我有一个像这样的简单商店：

{
    pages: {
        byId: {
            '0': {
                id: '0',
                canvases: {
                    byId: {
                        '0': {
                            id: '0',
                            layers:
                            {
                                byId: ['0':{uid:'0'}],
                                allIds: ['0']
                            }
                        }
                    },
                    allIds: ['0']
                },
                selectedId: '0'
            }            
        },
        allIds: ['0']
    }
}

它只存储由页面填充的文档。每个页面可能有一个或多个画布。每个画布都有零个或多个图层。在视觉上，每个页面/画布/图层是嵌套块的树。我的想法是当用户点击图层时，在我的HTML的z-index之上放置一个带有一些句柄的选择框。问题是选择组件在相对于页面的不同DOM树中，但同时我需要知道我的页面，画布和图层的边界矩形以正确地覆盖选择。最好的方法是什么？我是否需要使用redux存储来保存我的边界区域？

Answer 1

我认为这里的一个好解决方案是normalizr。需要像这样的json：

 {
  "id": "123",
  "author": {
    "id": "1",
    "name": "Paul"
  },
  "title": "My awesome blog post",
  "comments": [
    {
      "id": "324",
      "commenter": {
        "id": "2",
        "name": "Nicole"
      }
    }
  ]
}

并把它变成这样的东西：

 {
  result: "123",
  entities: {
    "articles": { 
      "123": { 
        id: "123",
        author: "1",
        title: "My awesome blog post",
        comments: [ "324" ]
      }
    },
    "users": {
      "1": { "id": "1", "name": "Paul" },
      "2": { "id": "2", "name": "Nicole" }
    },
    "comments": {
      "324": { id: "324", "commenter": "2" }
    }
  }
}

看看normalizr的文档，我认为它可以帮到你。

Answer 2

我决定选择MobX + MST框架：https://github.com/mobxjs。这个是覆盖快照以轻松管理应用程序状态。我甚至可以连接Redux Dev Tools来在运行时跟踪我的状态。除此之外，它还具有易失性状态的支持，这对于存储一些临时数据（如拖放鼠标偏移量或某些不依赖于存储可视数据）是有意义的。另一件事是可以轻松实现撤消/重做逻辑。我来自OOP世界，所以MobX / MST比Flux / Redux概念更接近我的思维。

在react-redux应用程序中存储特定于表示的数据的最佳方法

2 个答案: