如何获取两个列表,允许用户从每个列表中进行选择以创建两个新列表,并将来自新列表的数据组合到redux中的单个结果中

问题描述 投票:1回答:1

tldr:问题 -

  1. redux中的最佳实践,用于根据当前列表中的用户选择创建新列表。
  2. redux中的最佳实践/用于组合来自两个用户创建列表的数据的反应
  3. 比较和组合来自不同列表的不同命名值。

我知道这可能不是措辞最好的问题,如果有人提出具体问题,我可以更好地解释。我希望至少在正确的方向上有一点。比如要学习的库(比如React-Form将很容易处理所有这些。去阅读那些文档......)更多关于或仅仅是文档以查找更多信息

这是一个多部分问题,但我会尽力解释。我目前有三条路线。列表“A”的一个列出了数百人的列表。在用户单击时,它将调度一个调用单个人的操作,并显示具有可更改统计信息的该人员的详细信息页面。相当标准的redux异步动作。我在这里采取的常规方法之外的唯一方法是将后端分成两个不同的调用。一个用于整个人列表,一个用于个人。我对此的想法并不是每次有人访问人物页面时都要调用整个500mb,如果它不需要,因为人员列表只显示姓名和照片。只是一个附带问题,但这是redux中的正确方法吗?还是我没有理由过度复杂化我的代码?我正在以积极的方式接近这个应用程序,并希望一次会有成千上万的访问者,并且考虑到这么多的数据传输相对较新,不管它是否会成为一个问题

另一个列表“B”完全相同,但对于项目。但是,它们具有用户无法更改的固定数据。我确实接近了与人员容器相同的方法,并将api调用分为一个用于项目,另一个用于itemDetail。

我的主要问题是第三页。我想两个渲染两个列表。允许用户选择要添加到人员列表上方的选定字段的单个人。然后允许他们选择最多六个项目显示在项目列表上方。然后将每个所选项目(最多六个)的统计数据与所选人员的统计数据相结合。我遇到的一个棘手的部分是统计数据在人员和物品上的命名方式不同。例如

selectedPerson =   

"stats": {
            "armorperlevel": 3,
            "attackdamage": 69.97,
            "mpperlevel": 32,
            "attackspeedoffset": -0.02,
            "mp": 338.8,
            "armor": 36,
            "hp": 592.8,
            "hpregenperlevel": 0.55,
            "attackspeedperlevel": 3.4,
            "attackrange": 125,
            "movespeed": 350,
            "attackdamageperlevel": 3.375,
            "mpregenperlevel": 0.7,
            "critperlevel": 0,
            "spellblockperlevel": 1.25,
            "crit": 0,
            "mpregen": 7.576,
            "spellblock": 32.1,
            "hpregen": 8.374,
            "hpperlevel": 85
        },
        "id": 24,

这些物品可能包含其中一些。可能没有这些,但键有不同,并提供平坦或百分比选项。例如"description""<stats>+15 Attack Damage<br>+10% Life Steal</stats>"

"stats": {
            "FlatPhysicalDamageMod": 15,
            "PercentLifeStealMod": 0.1
        },
        "id": 1053,

作为我试图了解更多的主要部分之一。我可以在不显示逻辑的情况下解释。在人员详细信息页面上,我将每个统计信息分成一个函数,该函数将我的公式用于特定的统计信息乘以所选级别。虽然我不知道这是否是最好的方法,但它会返回我需要的确切数字。现在在第三页上,我想显示此统计信息框,还要为每个功能添加项目统计信息。我是否需要为每个人的stat函数写出数百个if(item.stats === 'whatever')?或者是否有更多的Redux或React方法来管理它?

javascript reactjs redux react-router-v4 reselect
1个回答
1
投票

我在这里采取的常规方法之外的唯一方法是将后端分成两个不同的调用。一个用于整个人列表,一个用于个人。

这不符合标准:大多数API将在此路径上采取一些变化。对单个实体的请求是完全合理的,并且对实体列表的大多数请求将具有某种寻呼或限制系统以防止不必要地转储整个记录集。

你问这是否是Redux的正确方法,但我认为你是在谈论后端问题,所以我不确定如何发表评论。发出针对“所有事物”和“其中一件事”的不同请求并将结果存储起来当然是合理的。如果在商店中管理大量的东西成为一个问题,这是一个很好的问题,但也可以通过定期清理商店来管理。

我想两个渲染两个列表。允许用户选择要添加到人员列表上方的选定字段的单个人。然后允许他们选择最多六个项目显示在项目列表上方。然后将每个所选项目(最多六个)的统计数据与所选人员的统计数据相结合。

当然,听起来不错。据推测,您的组件将具有单个人员和一组项目,并了解如何显示每种类型。

现在在第三页上,我想显示此统计信息框,还要为每个功能添加项目统计信息。我需要为每个人的stat函数写出数百个if(item.stats ==='what')吗?或者是否有更多的Redux或React方法来管理它?

我认为你可能会将程序逻辑与状态管理混淆。 Redux基本上是一个设计优雅的水桶。这是一个非常有用的桶,但它仍然只是一个桶。这是一个保存东西的地方,并在必要时检索/更新它们。

您可以选择使用两者之间的位来执行任何操作。您可能会发现很多逻辑最终都出现在连接代码中,您可以从Redux中检索值并将它们映射到组件。但是,这完全取决于你。

从广义上说,我想你可以考虑在商店中维护商品的哈希,每个商品的对象都可以将其特定的统计值转换为对一个人有意义的东西。如果这些可以通过某种方式变得通用(所有attackdamage属性都以相同的方式运行),那么一定要去做。

© www.soinside.com 2019 - 2024. All rights reserved.