Redux：保存“current-X”状态与仅存储 id

Question

例子（你可以跳过这个）

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

我的问题

我正在努力寻找将其转换为 Redux 的最有效策略。我正在考虑嵌套所有内容，例如 albums: [ { title, songs: [etc. etc.]}, {}]

所以我们将所有数据都放在一个对象中。但是，如果有人点击专辑、歌曲和引语，我的减速器将以某种方式需要知道要显示的内容以及用户当前正在使用的内容 with.I 可以想到两种方法：

方法一

{
 list: [] //contains all albums, songs, quotes as outlined above
 currentAlbum: albumId
 currentSong: songId
 currentQuote: quoteId
}

方法二 让状态的不同部分不仅包含 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... }

在这种方法中，我总是将列表中的内容移到适当的 'current' 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"
    }
}

Redux：保存“current-X”状态与仅存储 id

Redux: holding 'current-X` pieces of state vs. storing id's only

javascript

flux

reactjs

redux

react-redux