阵营和终极版与动感的元素

我目前正在开发中的分析仪表板反应，和/终极版类似于此：阵营和终极版与动感的元素

仪表盘的用户将能够添加和删除瓷砖定制仪表板以满足他们自己的需求，并且瓦片的配置在API中存储和检索。

用于瓦片的配置似乎与全局状态模型，以适应井的数据的存储：

上的负载，仪表板组件调度“loadTiles”动作
动作取入平铺数据并将其传递给“瓦片”缩减器
从那里进入商店/全局状态。
在mapStateToProps，数据被从state.app.tiles

然而，填充每个瓦片中的数据时出现问题访问。瓷砖的数量和数据的性质是动态的，所以减速器不能提前设置。

这可以通过每个组件管理自己的状态来解决（就像在使用componentWillMount的纯/传统React中一样），但是这会违反已经为项目其余部分设计的一些架构原则（理想情况是，一切都是在全球范围内进行管理）。

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

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

来源

2017-03-08 Paul T Davies

@ philipp的回答是正确的。还需要注意的是，Redux应用中的组件状态是正常的，根据此FAQ条目：http://redux.js.org/docs/faq/OrganizingState.html#organizing-state-only-redux-state。 – markerikson

你可以做的一件事就是为每个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" />

由此可以如所描述的要创建的uuid()方法here

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

来源

2017-03-08 09:25:35 philipp

这就是当我提到拥有所有数据集的动态数组时所获得的结果。我觉得像黑客回复而不是与它一起工作。 –

但事情就是这样。您也可以在服务器上创建这些ID并在前端使用它们，但本质上它们是相同的。 – philipp

使用一个数据以id隔开的reducer是通过动态数据使用redux的常用方法。我会补充说，如果瓷砖的类型不同（具有不同的功能），则可以使用不同的缩减器（每个瓷砖类型1个） – OlliM

阵营和终极版与动感的元素

回答

相关问题