Question

示例（您可以跳过此示例）

说有一个可以帮助人们整理音乐库的应用程序。该库包含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... }

在这种方法下，我将始终将列表中的内容移动到适当的“当前”减速器中，如果有人在此处进行了任何更改，则稍后我将更新列表。

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

在这里，我将提供一些建议，最好的方法是什么，为什么？以及是否有其他方式可以处理我未曾想到的状态。

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

1 个答案: