Question

我正在开发一个大型的react / redux网络应用，最近在实现新功能时遇到了问题。我担心我没有遵循redux最佳做法。我想我会简化这种情况并将其发布在这里，以便了解其他人如何在redux中工作。

情况如下：

我有一个标签栏，有两个项目：＆＃34;学生＆＃34;和＆＃34;学校＆＃34;

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

当＆＃34;学校＆＃34;选项卡处于活动状态，显示类似的分页学校列表。

点击学生＆＃34;学生＆＃34;页面，您将被定向到显示有关学生的更多信息的页面。

当您点击＆＃34;学校＆＃34;页面，您将被引导至显示有关学校的更多信息的页面，以及所有参加学校的学生的分页列表。

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"

我遇到的问题是我不能去学生＆＃34;学生＆＃34;选项卡，分页，然后点击＆＃34; Schools＆＃34;选项卡，单击一个，通过一些学生分页，然后返回＆＃34;学生＆＃34;选项卡没有看到来自＆＃34;学校＆＃34;标签出现在将军＆＃34;学生＆＃34;标签列表。

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

这种方法是最大的，但是最平坦的＆＃34;并包含redux与州内的最多信息。它有点难以推理，但它也不会在许多不同的地方重复数据。

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

也许我在考虑减少错误，但我很难解决这个问题。有人有什么想法吗？

非常感谢！

Answer 1

我通常会推荐方法＃1，它与我在Redux文档的Normalizing State Shape页面中描述的结构相匹配。虽然您可以按照自己的方式组织州树，但一般鼓励的做法是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中使用它。也就是说，随意使用您认为最容易使用的任何方法。

Redux商店帮助：学生和学校

1 个答案: