javascript - Redux:保存 'current-X` block 状态与仅存储 id

Question

示例(您可以跳过此)

假设有一个应用程序可以帮助人们组织他们的音乐库。该库包含Albums ，每个Album包含单独的Songs ，每个Song包含热门Quotes出现在那首歌中。对于每个对象都有更多信息，因此 Album对象保存有关艺术家、年份等的信息。用户可以编辑所有这些。

我的问题

我正在努力寻找最有效的策略将其转换为 Redux。我正在考虑嵌套像 albums: [ { title, songs: [etc. etc.]}, {}] 这样的东西

因此，我们将所有数据存储在一个对象中。但是，如果有人点击专辑、歌曲和引言，我的 reducer 将需要知道要显示的内容以及用户当前正在参与的内容。我可以想到两种方法:

方法 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... }

在这种方法中，我总是将列表中的内容移动到适当的“当前”reducer 中，如果有人在这里更改任何内容，我会在稍后的某个时刻更新列表。

不过，这似乎有点多余。同时，这种方法是否比将所有内容存储在一个对象中更快？

我希望在这里得到一些建议，什么是最好的方法，为什么，以及是否有其他我没有想到的处理状态的方法。

Answer 1

这就是normalizing your state的概念所在。发挥作用。总而言之，这通常意味着使用对象作为以项目 ID 为键的查找表来存储项目，并使用这些 ID 在其他地方引用项目。

因此，在您的情况下，您的状态树可能如下所示:

{
    albums : {
        albumid1 : {title, songs : ["songid1", "songid2"] }
    },
    songs : {
        songid1 : {title}
    },
    quotes : {
        quoteid1 : {text}
    },
    currentSelections : {
        album : "albumid1",
        song : "songid1",
        quote : "quoteid1"
    }
}