分组项目时一起

Question

我有一个减速这是适当的Redux的状态（假设allpeople-reducer.js）在我的终极版是resposible为下篇状态

{ 
     1:{id:1, first_name: "Tony", last_name: "Stark", gender: "Male"} 

     2:{id:2,first_name: "Wonder", last_name: "Woman", gender: "Female"} 

     3:{id:3,first_name: "Bruce", last_name: "Wayne", gender: "Male"} 

     4:{id:4,first_name: "Thor", last_name: "Ragnarok", gender: "Male"} 

     5:{id:5,first_name: "Bruce", last_name: "Banner", gender: "Male"} 

     6:{id:6,first_name: "Aqua", last_name: "Man", gender: "Male"} 

     7:{id:7,first_name: "Bat", last_name: "Girl", gender: "Female"} 

     8:{id:8,first_name: "Me", last_name: "Mario", gender: "MALE"} 
    } 

的正如你可以看到我已经将数组转换为ID为数组的对象作为我的键。用户然后可以选择用户界面中的人员并从上面的人员列表中建立一些组。我现在必须包括每个人的组号。所以我可以将上述状态转换为以下状态

{ 
     1:{id:1, first_name: "Tony", last_name: "Stark", gender: "Male", group: 1} 

     2:{id:2,first_name: "Wonder", last_name: "Woman", gender: "Female", group:2} 

     3:{id:3,first_name: "Bruce", last_name: "Wayne", gender: "Male", group:3} 
     4:{}...... 
    } 

我的意图是使用反应组件将属于同一组的人展示出来。因此，如果我有三个组，我将显示三个组件，它们使用react-redux将每个组中的所有人聚集在一起。请让我知道，如果我有这个权利。

Answer 1

看来您正在寻找更像是代码审查的内容，而不是针对特定问题的答案。我不知道如果是这样就是这样做的正确的地方，但这里有云：

• 这是相当奇怪的是，你保持一个对象，它的键是基本指数。这基本上是JavaScript数组对象的一个​​糟糕的重新创建。为什么不把英雄条目存储在数组中。
• 在某些时候，你将不得不根据小组分隔英雄条目。你可能做它在组件本身，虽然这可能会导致性能问题，如果组件经常重新渲染。我宁愿在减速机中做这件事，并将隔离结构存储在州商店中。
• 正如其他人所提到的，你也可以使用选择器来计算隔离，同时保持状态存储为英雄的线性阵列。我认为这样做会更有效率，但如果不针对您的特定用例进行实际测量，则不要尝试进行优化。
• 你在混淆两个不同的超级英雄宇宙。 ;）

如果您确实决定在组件中执行此操作，您的代码将如下所示。 （我测试的代码in a sandbox，所以你可以看到它在那里工作。）

import React from 'react'; 
import { render } from 'react-dom'; 

const heroes = { 
    '1': { id: 1, first_name: 'Tony', last_name: 'Stark', gender: 'Male', group: 1 }, 
    '2': { id: 2, first_name: 'Wonder', last_name: 'Woman', gender: 'Female', group: 2 }, 
    '3': { id: 3, first_name: 'Bruce', last_name: 'Wayne', gender: 'Male', group: 3 }, 
    '4': { id: 4, first_name: 'Thor', last_name: 'Ragnarok', gender: 'Male', group: 1 }, 
    '5': { id: 5, first_name: 'Bruce', last_name: 'Banner', gender: 'Male', group: 2 }, 
    '6': { id: 6, first_name: 'Aqua', last_name: 'Man', gender: 'Male', group: 3 }, 
    '7': { id: 7, first_name: 'Bat', last_name: 'Girl', gender: 'Female', group: 1 }, 
    '8': { id: 8, first_name: 'Me', last_name: 'Mario', gender: 'MALE', group: 2 }, 
}; 

const segregateGroups = consolidatedHeroes => { 
    return Object.keys(consolidatedHeroes).reduce((groups, key) => { 
    const currentHero = consolidatedHeroes[key]; 
    const groupId = currentHero.group - 1; 
    if (!groups[groupId]) { 
     groups[groupId] = []; 
    } 
    groups[groupId].push(currentHero); 
    return groups; 
    }, []); 
}; 


const SuperGroup = (props) => (
    <div> 
    <hr /> 
    <ul> 
     {props.heroes.map(hero => (<li id={hero.id}>{hero.first_name} {hero.last_name}</li>))} 
    </ul> 
    <hr /> 
    </div> 
); 

const SuperHeroConsolidated = (props) => (
    <div> 
    {segregateGroups(props.heroes).map(group => (<SuperGroup heroes={group} />))} 
    </div> 
); 

render(<SuperHeroConsolidated heroes={heroes} />, document.getElementById('root'));