Reactjs 反应&；具有动态元素的Redux

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

仪表板的用户将能够添加和删除互动程序，以根据自己的需要定制仪表板，互动程序的配置将存储并在API中检索

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

加载时，仪表板组件将发送“loadTiles”操作

该操作获取平铺数据并将其传递给“平铺”缩减器

从那里它进入存储/全局状态

在mapStateToProps中，从state.app.tiles访问数据

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

这可以通过每个组件管理自己的状态来解决（如使用componentWillMount等的纯/传统React），但这将违反为项目其余部分制定的一些架构原则（理想情况下，所有内容都要在全局状态下管理）

我能看到的存储数据的唯一方法是全局状态，它是一个具有各种数据集的动态数组的分析，这在我看来很混乱

---

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

您可以做的一件事是为每个磁贴使用一个ID。所以你所在的州可能是这样的：

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

然后，在

MapStateTrops（）

函数中，您可以使用自己的道具，如：

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

函数mapStateToProps（状态，ownProps）{
//测试它是否存在
if（state.tiles[ownProps.id]）{
返回{tileData:state.tiles[ownProps.id]}
}
其他的
{
返回{tileData:}
}
}

重要的一点是为每个磁贴移交一个唯一的ID，创建这些磁贴时，一种方法可以是：

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

从而可以按照所述创建

uuid（）

方法

---

我曾经遇到过一个类似的问题，如果您想看到使用高阶组件的更复杂的解决方案，请看一看（这是我自己无法接受的答案）。总之，以上是IMHO最简单的解决方案。

这就是我在提到拥有所有数据集的动态数组时所得到的。虽然我确实想入侵Redux而不是使用它，但事实就是这样。您也可以在服务器上创建这些id，并在前端使用它们，但本质上是一样的。使用单个reducer和id分隔的数据是对动态数据使用redux的正常方法。我想补充一点，如果瓷砖是不同类型的（具有不同的功能），你可以使用不同的还原剂（每种瓷砖1个）@philipp的答案是正确的。还需要注意的是，根据以下FAQ条目，Redux应用程序中的组件状态良好：。