javascript - Redux 商店帮助 : Students and Schools

Question

我正在开发一个大型 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 的看法是错误的，但我很难弄清楚这一点。大家有什么想法吗？

非常感谢!

Answer 1

我通常会推荐方法 #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 中展示如何使用它。也就是说，请随意使用您认为最容易使用的方法。