gpt4 book ai didi

javascript - Redux 商店帮助 : Students and Schools

转载 作者:行者123 更新时间:2023-12-03 02:40:48 25 4
gpt4 key购买 nike

我正在开发一个大型 React/Redux Web 应用程序,最近在实现新功能时遇到了问题。我担心我没有遵循 redux 最佳实践。我想我应该简化情况并将其发布在这里,以便了解其他人如何在 redux 中工作。

情况如下:

我有一个标签栏,其中有两个项目:“学生”和“学校”

当“学生”选项卡处于事件状态时,会显示所有学生的列表,并在页面底部显示一个用于显示更多学生的按钮。

当“学校”选项卡处于事件状态时,会显示类似的分页学校列表。

当您点击“学生”页面上的某个学生时,您将被定向到显示有关该学生的更多信息的页面。

当您点击“学校”页面中的学校时,您将被定向到一个页面,其中显示有关学校的更多信息,以及就读该学校的所有学生的分页列表。

API 端点非常简单:

GET /students - gets all students
GET /students/1 - gets student with id "1"
GET /schools - gets all schools
GET /schools/1 - gets school with id "1"
GET /students?schoolId=1 - gets all students attending school with id "1"

我遇到的问题是,我无法转到“学生”选项卡,分页,然后单击“学校”选项卡,单击其中一个,对某些学生进行分页,然后返回“学生”选项卡,而没有看到“学校”选项卡中的学生显示在常规“学生”选项卡列表中。

我可以想到三种方法来在 redux 中处理这个问题:

解决方案1:

{
students: {
all: {
"123": {
id: "123",
name: "Bob",
schoolId: 1,
fetchStatus: ""
}
},
fetchStatus: ""
},
schools: {
all: {
"321": {
id: "321",
name: "Redux University",
fetchStatus: ""
}
},
fetchStatus: ""
},
studentsPage: {
pageNumber: 1,
all: [ "123" ]
},
schoolsPage: {
pageNumber: 1,
all: [ "321" ]
},
schoolPage: {
studentsList: {
pageNumber: 1,
all: [ "321" ]
}
}
}

这种方法是最大的,但“最扁平”,并且在 redux 和 state 中包含最多的信息。这有点难以推理,但它也不会在许多不同的地方重复数据。

解决方案2:

{
students: {
all: {
"123": {
id: "123",
name: "Bob",
schoolId: 1,
fetchStatus: ""
}
},
fetchStatus: ""
},
schools: {
all: {
"321": {
id: "321",
name: "Redux University",
fetchStatus: ""
}
},
fetchStatus: ""
}
}

这种方法删除了与页面相关的条目,并将它们纯粹保留在渲染列表本身的 react 组件的状态中。

解决方案3:

{
students: {
pageNumber: 1,
all: {
"123": {
id: "123",
name: "Bob",
schoolId: 1,
fetchStatus: ""
}
},
fetchStatus: ""
},
schools: {
all: {
"321": {
id: "321",
name: "Redux University",
fetchStatus: "",
studentsPageNumber: 1,
studentsFetchStatus: "",
students: [
"123": {
id: "123",
name: "Bob",
schoolId: 1
}
]
}
},
fetchStatus: ""
}
}

这种方法将学生安置在学校内部和外部。它最容易处理,但也会重复数据并使学生信息保持同步变得更加困难。

解决方案4:

{
students: {
all: {
"123": {
id: "123",
name: "Bob",
schoolId: 1,
fetchStatus: ""
}
},
fetchStatus: ""
},
schools: {
all: {
"321": {
id: "321",
name: "Redux University",
fetchStatus: ""
}
},
fetchStatus: ""
}
}

此方法与解决方案 2 相同,但不是将列表信息保持在 react 状态,而是将其保存在存储中,并且每次导航页面时都会清除学生条目。

也许我对 redux 的看法是错误的,但我很难弄清楚这一点。大家有什么想法吗?

非常感谢!

最佳答案

我通常会推荐方法 #1,它与我在 Normalizing State Shape 中描述的结构相匹配。 Redux 文档中的页面。虽然您可以按照自己想要的方式组织状态树,但一般鼓励的做法是 normalize the state and treat it like a mini client-side database 。这通常是处理缓存数据的最佳方式。

从那里,您可以使用 ID 列表来表示给定屏幕所需的数据子集。有一篇很棒的帖子,名为 Advanced Redux Entity Normalization这更详细地介绍了这种方法。

如果编写逻辑来保存、更新和检索商店中的这些项目很困难,您可能需要考虑使用众多 entity/collection management addon libraries 之一。可用的。我个人是Redux-ORM的粉丝库,并在我的 "Practical Redux" tutorial series 中展示如何使用它。也就是说,请随意使用您认为最容易使用的方法。

关于javascript - Redux 商店帮助 : Students and Schools,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48332600/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com