示例(你可以跳过这个(
假设有一个应用程序可以帮助人们组织他们的音乐库。该库包含Albums
,每个Album
包含单独的Songs
,每个Song
包含出现在该歌曲中的流行Quotes
。对于这些对象中的每一个,都有更多信息,因此Album
对象包含有关艺术家、年份等的信息。用户可以编辑所有这些内容。
我的问题
我正在努力寻找最有效的策略将其转换为 Redux。我想像albums: [ { title, songs: [etc. etc.]}, {}]
一样嵌套所有东西
因此,我们将所有数据都放在一个对象中。但是,如果有人点击专辑,歌曲和报价,我的化简器将需要以某种方式知道要显示的内容以及用户当前正在参与的内容。我可以想到两种方法:
方法1
{
list: [] //contains all albums, songs, quotes as outlined above
currentAlbum: albumId
currentSong: songId
currentQuote: quoteId
}
方法 2让状态的不同部分不仅保存 id,而且保存整个对象:
listReducer: [] // holds the list, same as above
currentAlbumReducer: { id: albumid12312, title: "The Eminem Show", etc... }
currentSongReducer: { id: songid4545, song_title: "I believe", etc... }
currentQuoteReducer: { id: 12312, quote: "I'm Slim Shady", etc... }
在这种方法上,我总是会把东西从列表中移动到适当的"当前"化简器中,如果有人在这里更改了任何内容,我会在以后的某个时候更新列表。
但是,这似乎有点多余。同时,这种方法是否比将所有内容存储在单个对象中更快?
我将不胜感激这里的一些建议,什么是最好的方法,为什么,以及是否有其他处理状态的方法我没有想到。
这就是规范化状态的概念发挥作用的地方。 总而言之,这通常意味着使用对象存储项目作为按项目 ID 键控的查找表,并使用这些 ID 在其他地方引用项目。
因此,在您的情况下,您的状态树可能如下所示:
{
albums : {
albumid1 : {title, songs : ["songid1", "songid2"] }
},
songs : {
songid1 : {title}
},
quotes : {
quoteid1 : {text}
},
currentSelections : {
album : "albumid1",
song : "songid1",
quote : "quoteid1"
}
}