分組項目時一起

我有一個減速這是適當的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將每個組中的所有人聚集在一起。請讓我知道，如果我有這個權利。

來源

2017-10-21 greg chap

你應該始終保持你的狀態乾淨，在這種情況下，你應該把所有的人在一起的意思，而是用一個選擇讓人們你想根據小組ID –

嗨，Arber Sylejmani，是的，我把所有的人聚集在一起。但是，我可以將組添加爲我之前狀態的新密鑰。只有擁有該組時，我纔可以使用選擇器。我的初始狀態沒有組，但只要用戶將一個人添加到組中，我就會更新我的狀態（仔細複製到新狀態）希望您能理解。 –

創建一個只保存組id的新狀態，然後使用選擇器計算來自存儲的派生數據。例如： state.allPeople = {...}和state.groups = ['1'，'2'，'3'，...] –

看來您正在尋找更像是代碼審查的內容，而不是針對特定問題的答案。我不知道如果是這樣就是這樣做的正確的地方，但這裏有雲：

這是相當奇怪的是，你保持一個對象，它的鍵是基本指數。這基本上是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'));

來源

2017-10-21 19:43:34 balajeerc

分組項目時一起

回答

相關問題