如何在加载数据时构建规范化 Redux 存储

Question

我正在尝试创建一个列出书籍的 React/Redux 应用程序。然后，每本书都有相关的书籍。我知道我应该以某种规范化的方式构建我的 redux 存储，如下所示：

{
books: {
'book1id': {
title: 'Book 1',
author: 'Author 1',
relatedBooks: ['book2id', 'book3id']
},
'book2id': {
title: 'Book 2',
author: 'Author 2',
relatedBooks: ['book1id']
}
}
}

并根据需要加载每本书。

问题是在哪里存储来自 API 请求的加载/错误数据？我的一些想法是为每本书创建一个对象，例如

books: {
'book1id': {
isLoading: false,
error: null,
book: {
title: 'Book 1',
...
}
},
...
}

但这似乎略微降低了状态的可读性/直观性。有没有更好的方法来构建国家？

Answer 1

我构建了我的 redux 存储，以便它包含我所有关系数据的实体对象，并将特定于页面或一组路由的内容存储在状态的不同部分中。我的状态树可能如下所示：

const state = {
entities: {
books: {
...
},
authors: {
...
},
...
},
booksPage: {
isLoading: false
}
} 

现在，我将关系状态与 UI 组件的状态分开跟踪。我不建议尝试在单个实体中存储isLoading状态，因为该实体可能存在也可能不存在。如果您需要基于每个实体的更精细的加载/错误状态，那么在一组实体上，您有几个选项。第一个选项是保留一组当前正在加载的 ID。这不是一个非常实用的解决方案，因为您无法仅通过 ID 是否在集合中来跟踪成功或失败。

下一个更好的解决方案是将映射从 ID 保留到状态对象，其中包括单个实体是否正在加载、是否成功或加载失败以及错误是什么。

const state = {
entities: {
books: {
...
},
authors: {
...
},
...
},
booksPage: {
loading: {
book1: {
status: 'FAILED',
error: 'Network request failed.'
},
book2: {
status: 'SUCCESS',
},
book3: {,
status: 'IN_PROGRESS'
}
}
}
}

总之，我发现将您的关系状态分离到实体子对象中，同时让页面特定的状态部分对我来说效果很好。