Redux Store 帮助：学生和学校

Question

我正在开发一个大型 react/redux 网络应用程序，最近运行在实现一项新功能时遇到了问题。我担心我没有遵循 redux 最佳实践。我想我会简化情况并 post 在这里，以便查看其他人如何在 redux 中工作。

情况如下：

我有一个包含两个项目的标签栏："Students" 和 "Schools"

当 "Students" 选项卡处于活动状态时，将显示所有学生的列表，以及页面底部的按钮以显示更多学生。

当 "Schools" 选项卡处于活动状态时，将显示类似分页的学校列表。

当您在 "Students" 页面上单击学生时，您将被定向到显示有关该学生的更多信息的页面。

当您在 "Schools" 页面中单击一所学校时，您将被定向到一个页面，该页面显示有关该学校的更多信息，以及该学校所有学生的分页列表。

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"

我运行遇到的问题是我无法转到 "Students" 选项卡，分页，然后单击 "Schools" 选项卡，单击其中一个，分页一些学生，return 转到 "Students" 选项卡，而没有看到来自 "Schools" 选项卡的学生出现在常规 "Students" 选项卡列表中。

我可以想到三种方法在 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" ]
        }
    }
}

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

解决方案 2：

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

这种方法删除了与页面相关的条目，并使它们纯粹处于呈现列表本身的反应组件的状态。

解决方案 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 相同，但不是将列表信息保持在反应状态，而是将其保存在存储中，并且每次导航页面时都会清除学生条目。

也许我在考虑 redux 是错误的，但我无法弄清楚这一点。有人有什么想法吗？

非常感谢！

Answer 1

我通常会推荐方法 #1，它与我在 Normalizing State Shape page in the Redux docs. While you can organize your state tree any way you want, the general encouraged practice is to normalize the state and treat it like a mini client-side database 中描述的结构相匹配。这通常是处理缓存数据的最佳方式。

从那里，您可以使用 ID 列表来表示给定屏幕所需的数据子集。有一个很棒的 post 称为 Advanced Redux Entity Normalization，它详细介绍了这种方法。

如果编写用于在商店中保存、更新和检索这些项目的逻辑有困难，您可能需要考虑使用众多 entity/collection management addon libraries available. I personally am a fan of the Redux-ORM library, and show how to use it in my "Practical Redux" tutorial series 之一。也就是说，请随意使用您认为最容易使用的方法。

Redux Store 帮助：学生和学校

Redux Store Help: Students and Schools

javascript

store

reactjs

redux