Question

我尝试使用redux设计管理面板网站，并对REST资源执行基本的crud操作。我想我已经开始理解redux了，但是我不太确定如何构造状态形状，特别是在每页存储不同的数据时。例如，登录页面将存储与页面不同的数据，例如编辑用户。

我提出了以下＆＃34;架构＆＃34;为我的状态形状：

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"
                }
        }
    }
};

然后，我会为每个＆＃34;页面提供一个减速器＆＃34;在pages树中。这是处理这个问题的正确方法吗？我似乎找不到任何关于如何构建更大的应用程序的示例或教程，这些应用程序不仅仅是在几个视图之间切换的简单页面。

Answer 1

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

这是数据结构和软件架构中的一般问题，尤其是在用户界面周围。对此没有一个通用的答案;它将始终取决于应用程序的具体情况以及它运行的数据。我可以证明我在多个项目（包括当前的React项目，以及Angular和Backbone）上的专业工作，其数据结构与您描述的数据结构类似 - 即以视图为中心和标准化数据的混合。 p>

早期我遇到了开发Java Swing应用程序的问题，其中问题被构建为组件（视图）层次结构（又名containment hierarchy）与对象（data）层次结构（不要混淆） class或继承层次结构） - 当后者（数据）应该镜像前者（视图）时。

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

部分数据层次结构（在顶级州/商店中）的一些原因反映了视图层次结构：

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

部分数据层次结构更多 normalized 且与视图层次结构无关的一些原因：

减少重复（DRY principle）
数据将被重复使用或共享
数据表示与UI不太紧密相关的长期状态，可能在浏览器存储中重复

特别是对于Redux，某些数据所以短暂或瞬态，它根本不属于顶级状态/存储。这些数据可以保持在组件状态，这也使商店更加苗条和专注。

将部分数据置于组件状态的某些原因：

数据是100％视图专用
数据应隐藏/ encapsulated来自应用程序的其他区域;也许它适用于higher-order component，或者是通用且高度可重用的组件（组件逻辑本身 - 而不是数据）
数据严格表示短暂的或瞬态的仅UI状态

有趣的博客条目，包含使用顶级商店状态与组件级状态的扩展分析：

3 Things I Learned About Working with Data in Redux

多页的{React-Redux状态形状

1 个答案: