Question

我在React应用程序中使用Redux进行状态管理。我还打算“压扁”任何API响应，以鼓励重用并减少状态树中的数据重复。我希望使用Normalizr来实现这一目标。

我的问题是管理对象之间关系的首选方式 - 特别是继承类型关系。

应用程序向API发出请求（后端用Java编写，Spring）。已定义的域模型包括以下关系：

interface NamedThing {
    int getId();
    String getName();
}

interface Pet extends NamedThing {
    Person getOwner();
}

class Cat implements Pet {
    int getId() {
        ...
    };
    String getName() {
        ...
    };
    Person getOwner() {
        ...
    };
    int getNumberOfLivesRemaining() {
        …
    };
}

class Dog implements Pet {
    int getId() {
        ...
    };
    String getName() {
        ...
    };
    Person getOwner() {
        ...
    };
    int getAgeInDogYears() {
        …
    };
}

class Person implements NamedThing {
    int getId() {
        ...
    };
    String getName() {
        ...
    };
}

对/ pets端点的GET请求的响应可能如下所示：

[{
    id: 1,
    type: ‘cat',
    name: ‘Fluffy',
    owner: {
        id: 1,
        name: ‘Mary'
    },
    numberOfLivesRemaining: 9
},
{
    id: 2,
    type: ‘dog',
    name: ‘Ralph',
    owner: {
        id: 1,
        name: ‘Mary'
    },
    ageInDogYears: 10
}]

如果定义了正确的模式，Normalizr会将响应扁平化为：

{
    result: [
        {id: 1, schema: ‘cats’},
        {id: 2, schema: ‘dogs’}
    ],
    entities: {
        cats: {
            1: {
                id: 1,
                type: ‘cat’,
                name: ‘Fluffy’,
                owner: 1,
                numberOfLivesRemaining: 9
            }
        },
        dogs: {
            2: {
                id: 2,
                type: ‘dog',
                name: ‘Ralph',
                owner: 1,
                ageInDogYears: 10
            }
        },
        persons: {
            1: {
                id: 1,
                name: ‘Mary’
            }
        }
    }
}

方法1：

不同的实体（猫，狗和人）可以存储在应用程序状态的类似命名的集合中。然而，我会失去猫和狗是宠物的细节，我知道这是因为我打电话给宠物终点。

方法2：

我可以将所有宠物实体存储在宠物收藏中，并将所有猫的ids和所有狗的ID存储在不同的收藏中。然后我可以通过使用React-Redux mapStateToProps函数将所有猫，所有的狗或所有宠物传递到组件中进行相应的过滤。

但是，如果我向/ namedThings端点发出GET请求，我会让猫，狗和人返回并将它们存储在namedThings集合中，其中包含猫，狗和人的ID。但是，我不知道猫和狗也是宠物，因为这些信息不包含在API响应中。

为了解决这个问题，我可以：

更改API，以便超级类型信息包含在响应中
将猫和狗的集合映射到包含所有宠物的合并组件“prop”
让减压者知道猫是宠物，因此在将猫添加到商店时会为宠物ID集合添加一个ID。

使用Redux和Normalizr时，表示此类实体层次结构的最佳方法是什么？其他团队如何解决这个问题？

Answer 1

这两种方法听起来都不错：

将猫和狗的集合映射到包含所有宠物的合并组件“prop”



让减压者知道猫是宠物，因此在将猫添加到商店时，会将id添加到宠物ID集合中。

你应该尝试两种方法，看看对你的应用更有意义。

如何在展平的Redux商店中保留继承信息？

方法1：

方法2：

1 个答案: