javascript - 多个页面的 React-Redux 状态形状

Question

我正在尝试使用 redux 和 react 设计一个管理面板网站，以对 REST 资源执行基本的 crud 操作。我想我开始理解 redux，但我不太确定如何构建状态形状，尤其是在每页存储不同数据时。例如，登录页面将存储与编辑用户页面不同的数据。

我为我的状态形状提出了以下“模式”:

var schema = {
    //Things applicable to the authenticated used
    authentication: {
        authenticated: true, //True if a user is authenticated
        auth_user_id: 2, //ID of the authenticated user
    },
    //Things applicable to the layout of the application, for example the notification menus that can be toggled on and off
    layout: {

    },
    //Things specific to each page of the application
    pages: {
        //Login page (eg https://example.com/login)
        login: {
            isFetching: false, //Is data loading?

        },
        //Data pertaining to the page that shows list of users (eg https://example.com/users)
        userList: {

        },
        //Data pertaining to the page to edit a particular user (eg https://example.com/users/:id/edit)
        userEdit: {

        }
    },
    //Normalized entities are stored here.
    entities: {
        usersById: {
            2:
                { //User ID
                    id: 2,
                    first_name:
                        "Some",
                    last_name:
                        "User"
                }
        }
    }
};

然后我将为 pages 树中的每个“页面”创建一个缩减器。这是处理这个问题的正确方法吗？我似乎找不到任何关于如何构建更大的应用程序的示例或教程，而不仅仅是在几个 View 之间切换的简单页面。

Answer 1

TL;DR/摘要: 是，您的解决方案似乎与具有重要用户界面组件的应用程序的一般数据架构规范一致。 但是，您可能还想考虑一些内部组件状态。

这是数据结构和软件架构中的一个普遍问题，尤其是在用户界面方面。对此没有放之四海而皆准的答案。它将始终取决于应用程序的细节及其运行的数据。我可以证明我专业从事过多个项目(包括当前的 React 项目，以及 Angular 和 Backbone)，其数据结构与您描述的相似——即以 View 为中心的数据和规范化数据的混合体。

早些时候，我遇到了开发 Java Swing 应用程序的问题，该问题被定义为组件( View )层次结构(也称为 containment hierarchy)与对象(data)层次结构(不要与 class 或混淆)继承层次结构)——以及后者(数据)何时应镜像前者( View )。

我现在更普遍地认为这个问题是在考虑 View 层次结构的情况下设计数据层次结构。

部分数据层次结构(在顶级状态/存储中)反射(reflect) View 层次结构的一些原因:

• 数据非常特定于 View ，以自然语言或用户输入在屏幕上表示事物
• 数据不会被应用程序的其他区域重复使用或共享
• 数据表示短暂的仅限 UI 的状态，可能会缓存几分钟但不会永久缓存

部分数据层次结构的一些原因 normalized 并且与 View 层次结构无关:

• 减少重复(DRY principle)
• 数据将被重用或共享
• 数据代表与 UI 没有那么紧密联系的长期状态，可能会在浏览器存储中复制

特别是对于 Redux，一些数据如此是短暂的或短暂的，以至于它根本不属于顶级状态/存储。这些数据可以保存在组件状态中，这也使商店更加精简和专注。

将部分数据置于组件状态的一些原因:

• 数据 100% 特定于 View
• 应该隐藏数据/encapsulated来自应用程序的其他领域；也许是为了 higher-order component ，或通用且高度可重用的组件(组件逻辑本身——而非数据)
• 数据严格表示短暂或 transient 的 UI-only 状态

有趣的博客条目，对使用顶级存储状态与组件级状态进行了扩展分析:

• 3 Things I Learned About Working with Data in Redux通过尼克坎特尔米