多页面的React-Redux状态形状

Question

我正在尝试使用redux设计一个管理面板网站，并做出反应以对REST资源执行基本的操作。我想我已经开始了解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树中的每个“页面”使用一个化简器。这是处理此问题的正确方法吗？我似乎找不到任何有关如何构建更大的应用程序的示例或教程，而这不仅仅是一个在几个视图之间切换的简单页面。

Answer 1

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

这是数据结构和软件架构中的普遍问题，特别是在用户界面方面。对此没有一刀切的答案；它始终取决于应用程序的具体情况及其运行的数据。我可以证明，我曾专业从事过多个项目（包括当前的 React 项目，以及 Angular 和 Backbone），其数据结构与您描述的类似，即以视图为中心的数据和标准化数据的混合。

早期，我在开发 Java Swing 应用程序时遇到了这个问题，该问题被定义为组件（视图）层次结构（又名包含层次结构）与对象（数据）层次结构（不要与类或继承层次结构混淆）——以及当后者（数据）应该反映或不反映前者（视图）。

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

让部分数据层次结构（在顶级状态/存储中）镜像视图层次结构的一些原因：

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

让数据层次结构的某些部分更加规范化并且与视图层次结构无关的一些原因：

• 减少重复（DRY原则）
• 数据将被重用或共享
• 数据代表与 UI 联系不那么紧密的长期状态，可能在浏览器存储中重复

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

将部分数据保留在组件状态本地的一些原因：

• 数据 100% 特定于视图
• 数据应该对应用程序的其他区域隐藏/封装；也许它是针对高阶组件，或者是通用且高度可重用的组件（组件逻辑本身——而不是数据）
• 数据严格地表示短暂或瞬态的仅 UI 状态

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

• 我在 Redux 中处理数据时学到的 3 件事，作者：Nick Cantelmi