反应＆amp; Redux与动态元素

Question

我目前正在React / Redux中开发一个与此类似的分析仪表板：

仪表板的用户将能够添加和删除切片以根据自己的需要自定义仪表板，并在API中存储和检索切片的配置。

存储用于配置磁贴的数据似乎与全局状态模型非常吻合：

1. 在加载时，仪表板组件将调度“loadTiles”操作
2. 操作获取切片数据并将其传递给'tiles'reducecer
3. 从那里进入商店/全球状态。
4. 在mapStateToProps中，从state.app.tiles
访问数据

但是，填充每个磁贴的数据时会出现问题。磁贴的数量和数据的性质是动态的，因此缩减器不能提前设置。

这可以通过管理自己状态的每个组件来解决（如使用componentWillMount等的纯/传统React），但这将违反为项目其余部分布局的一些体系结构主体（理想情况下一切都是在全球范围内管理。）

我可以看到存储数据的唯一方法是全局状态是使用各种数据集的动态数组进行分析，这听起来很麻烦。

本地组件是否是最佳解决方案？或者这可以在全球状态干净地完成吗？是否有使用动态指定的查询的Redux示例？

Answer 1

您可以做的一件事是为每个Tile使用ID。所以你的州可能看起来像那样：

{
  tiles: {
    tile1: {},
    …
    tile100: {}
  }
}

在mapStateToProps()函数中，你可以像这样使用自己的道具：

function mapStateToProps(state, ownProps) {
  //test if it exists
  if (state.tiles[ownProps.id]) { 
    return { tileData: state.tiles[ownProps.id]  }
  }
  else
  {
    return { tileData: <default state> }
  }
}

重要的一部分是为每个图块移交一个唯一的ID，当创建它们时，可以采用以下方式：

<Tile id={uuid()} other="stuff" />

可以按照here

所述创建uuid()方法

我曾经遇到过类似的问题，如果你想使用更高阶的组件（我自己的未接受的答案）看到更复杂的解决方案，请查看here。总而言之，以上是最简单的解决方案恕我直言。