代码之家 › 专栏 › 技术社区 › R. Kohlisch

redux:保存“current-x”状态片段与仅存储id

flux react-redux redux reactjs javascript

0

R. Kohlisch · 技术社区 · 7 年前

示例(您可以跳过此项)

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

我的问题

我正在努力寻找最有效的策略来将其转换为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... }

在这种方法中,我总是将列表中的内容移动到适当的“当前”还原器中,如果有人在这里更改了任何内容,我将在稍后的某个时间更新列表。

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

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

1 回复 | 直到 7 年前

1

2

markerikson 7 年前

这就是 normalizing your state 开始发挥作用。总而言之,这通常意味着将使用对象的项存储为由项id键控的查找表,并使用这些id引用其他地方的项。

所以,在你的例子中,你的状态树可能看起来像:

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