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

Question

tldr：问题 -

redux 中基于用户 selection 从当前列表创建新列表的最佳实践。
redux/react 中关于合并来自两个用户创建列表的数据的最佳实践
比较和合并不同列表中不同命名的值。

我知道这可能不是措辞最好的问题，如果有人有具体问题，我可以更好地解释它。我希望至少在正确的方向上有一点。例如一个要学习的库（比如 React-Form 会很容易地处理所有这些。去阅读那些文档......）更多关于或只是一般的文档以找到更多信息

这是一个多部分问题，但我会尽我所能解释它。我目前有3条路线。一个用于列表 "A" 的列表，它列出了数百人的列表。在用户单击时，它会调度一个调用单个人的操作，并显示该人的详细信息页面以及可变的统计信息。非常标准的 redux 异步操作。我在这里采用的唯一超出规范的方法是将后端分成两个不同的调用。一份用于整个人员列表，一份用于个人。我对此的想法是，如果不需要，则每次有人访问人员页面时都不要调用整个 500mb，因为人员列表只显示姓名和照片。只是一个附带问题，但这是 redux 中的正确方法吗？或者我只是无缘无故地使我的代码过于复杂？我正在以积极的方式接近这个应用程序，希望一次会有成千上万的访问者，而且我对考虑这么多数据传输还比较陌生，不管它是否会成为一个问题

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

我的主要问题是第三页。我想要两个渲染两个列表。允许用户 select 将一个人添加到人员列表上方的 selected 字段中。然后允许他们 select 最多六个项目也显示在项目列表上方。然后将每个 selected 项目（最多六个）的统计数据与 selected 人的统计数据结合起来。我运行遇到的棘手部分之一是统计数据在人物和物品上的命名方式不同。例如

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,

这些物品可能包含其中一些。可能有 none 个，但键是不同的，也提供固定或百分比选项。如 "description": "<stats>+15 Attack Damage<br>+10% Life Steal</stats>",

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

作为主要部分之一，我正在努力了解更多信息。我可以在不显示我的逻辑的情况下尽可能地解释。在人员详细信息页面上，我将每个统计信息分成一个函数，该函数将我的公式应用于该特定统计信息乘以 selected 级别。虽然我不知道这是否是可行的最佳方法以及 returns 我需要的确切数字。现在，在第三页上，我想显示这个统计框，但也将项目统计添加到这些功能中的每一个。我需要为每个人的统计函数写数百个 if (item.stats === 'whatever') 吗？还是有更多的 Redux 或 React 方法来管理它？

Answer 1

The only outside the norm approach I took here was to split the backend into two different calls. One for the entire people list and one for the individual person.

这并不超出常态：大多数 API 都会在此路径上采取一些变化。对单个实体提出请求是完全合理的，大多数对实体列表的请求都会有某种分页或限制系统，以防止不必要地转储整个记录集。

你问这是否是 Redux 的正确方法，但我认为你是在谈论后端问题，所以我不太确定如何发表评论。对 "ALL the things" 和 "ONE of the things" 发出不同的请求并存储结果当然是合理的。如果管理商店中的大量物品成为一个问题，这是一个很好的问题，但也可以通过定期清理商店来解决。

I would like two render both lists. allow a user to select a single person to be added to a selected field above the peoples list. and then allow them to select up to six items to be shown above the items list as well. Then combine the stats from each selected item (up to six) with the stats of the selected person.

好的，听起来不错。大概你的组件将有一个单一的集合人物和一组项目，并了解如何显示每种类型。

Now on this third page I want to show this stat box, but also add in the items stats to each of these functions. will I need to write hundreds of if (item.stats === 'whatever') to each person stat function? or is there a more Redux or React way to manage this?

我认为您可能将程序逻辑与状态管理混淆了。 Redux 基本上是一个设计优雅的桶。这是一个非常有用的桶，但它仍然只是一个桶。这是一个放东西的地方，retrieve/update 需要的时候。

你可以选择用中间的位做任何你想做的事。您可能会发现您的许多逻辑最终都出现在连接代码中，您可以在其中从 Redux 检索值并将它们映射到您的组件。但是，这完全取决于您。

概括地说，我想您可能会考虑在商店中维护物品的散列，其中的每个对象都可以将其特定的统计值转换为对一个人有意义的东西。如果这些可以以某种方式通用（所有 attackdamage 属性的行为方式相同），那么一定要去做。

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

how to take two lists, allow a user to make selections from each to create two new lists and combine data from new lists into a single result in redux

javascript

reactjs

redux

react-router-v4

reselect