在 React Redux 中处理全部选择

Question

我正在使用React和Redux构建一个简单的文件夹管理系统。其中一个要求是能够使用 shift 选择多个文件。

例如，如果我选择了文件夹 B 的以下结构：

[Folder] Folder A
[Folder] Folder B *
[Folder] Folder C
[Folder] Folder D
[Folder] Folder E
[File] File 1
[File] File 2
[File] File 3
[File] File 4
[File] File 5

现在，如果用户按住 shift 键并单击文件 3，我希望文件夹 B 和文件 3 之间的所有内容(包括)都标记为选中。

我的商店看起来像这样：

{
directoryData: {
directories: [{id: 1, name: 'Folder A'}, {id: 2, name: 'Folder B'}, ...],
selected: [2]
},
fileData: {
files: [{id: 1, name: 'File A'}, {id: 2, name: 'File B'}, ...],
selected: [1, 2]
},
}

我不知道如何处理这种情况。如果所有项目都存储在单个数组中，我本可以在化简器中轻松处理它，但是由于directoryData和fileData子树都受到影响，这似乎不是一个选择。

我几乎需要的是某种顶级组件，它可以访问文件和目录的状态，计算应选择哪些项目，然后，例如，为每个需要选择的项目调用directoryActions.select()或fileActions.select()。

到目前为止，我已经避免在组件中放置如此多的业务逻辑，并且想知道是否有更好的方法来解决这个问题。

Answer 1

我会建议一个不同的状态结构：

{
directoryData: {
// array of mixed directories and folder with visual ordering
content: [{ type: 'directories', id: 1 }, { type: 'directories', id: 2 }, { type: 'files', id: 1 }, { type: 'files', id: 2 }],
// optional: array of selected mixed directories and folder
selected: [{ type: 'directories', id: 2 }, { type: 'files', id: 1 }],
directories: { the directories data
1: {id: 1, name: 'Folder A'}, 
2: {id: 2, name: 'Folder B'},
},
files: { // the files data
1: {id: 1, name: 'File A'}, 
2: {id: 2, name: 'File B'}
}
}

• 要使用 shift 进行选择，您只需从content数组到selected数组。另一个选项是向内容中的项目添加selected属性，然后切换它。我更喜欢selected数组，因为它更容易操作所选项目。
• 如果添加文件或目录，则将它们添加到各自的文件中 集合，然后在content数组中添加引用。
• 要删除，请执行与添加相反的操作。
• 要更改文件或目录，请替换 各自的收藏。