Redux 状态:添加或替换

Redux state : Add or replace

假设我正在构建一个在线流媒体网站

路线/artist/name:(显示艺术家专辑列表) 当前状态:

{ 
  artist: 'Eminem', 
  albums: [{name: 'MMLP', songs: [listofsongids]}, {name: 'Relapse', songs: [...]}]
}

route /artist/name/albums/albumid:(显示专辑歌曲列表) 当前状态:

{ 
  artist: 'Eminem', 
  albums: [{name: 'MMLP', songs: [listofsongids]}, {name: 'Relapse', songs: [...]}], 
  songs: {song1: {lyrics: '...', ...}, song2: {...}}
}

如果我立即切换路线访问另一个相册,我应该更换 带有新列表的状态的歌曲 属性 或只是添加到它并检索 当前专辑歌曲列表 id 的相关内容?

在 github Dan Abramov 建议永远不要清空路由更改时的状态: https://github.com/reactjs/redux/issues/1235

我很好奇你们会如何处理这个问题?

这将是一个很难回答的问题,因为你会发现人们会有自己的偏好,最终,没有一个 正确回答。这将取决于您的应用程序、它使用的数据以及您的要求,但无论如何我都会给您我的意见。

鉴于您有 ID,并且可以使用 id 作为 object 键轻松查找 songs,并且歌曲数据正在运行的可能性很小(我假设)要在负载之间切换,我不会担心清空它并根据需要添加新歌曲。

这将使切换回以前加载的相册更快,这对用户来说更好。

如果您特别担心随着​​ collection 的增长查找歌曲的性能,您可以使用 reselect 删除不必要的查找。

事实上,normalized you can get the data 越多,我从状态中删除数据的次数就越少。您可以保留用户加载的每个 album,而不管 artist,甚至保留每个 artist,只需更改商店中 selectedArtist 和 [=16= 的值].

这还会在加载数据时为您提供更多选择。例如,如果用户将鼠标悬停在艺术家上方 3 秒,您可以在后台加载该艺术家的所有专辑,或者在点击 /artist/name 路由后立即在后台加载歌曲。