Redux规范化状态的选择器

Question

我可以帮助您创建基于redux文档中规范化的状态选择器。请参考以下内容：

我需要帮助创建基于redux文档中规范化的状态选择器。

状态

{
    "entities": {
        "people": {
            "byId": {
                "1": {
                    "name": "Test User 1",
                    "classes": ["class1", "class2"],
                    "isSelected": true
                },
                "2": {
                    "name": "Test User 2",
                    "classes": ["class2", "class3"],
                    "isSelected": false
                },
                "3": {
                    "name": "Test User 3",
                    "classes": ["class4"],
                    "isSelected": false
                }
            },
            "allIds": ["1", "2", "3"]
        },
        "classes": {
            "byId": {
                "class1": {
                    "name": "Class 1",
                    "courses": ["course1", "course2"]
                },
                "class2": {
                    "name": "Class 2",
                    "courses": ["course2"]
                },
                "class3": {
                    "name": "Class 3",
                    "courses": ["course1", "course3"]
                }
            },
            "allIds": ["class1", "class2", "class3"]
        },
        "courses": {
            "byId": {
                "course1": {
                    "name": "Course 1"
                },
                "course2": {
                    "name": "Course 2"
                },
                "course3": {
                    "name": "Course 3"
                }
            },
            "allIds": ["course1", "course2", "course3"]
        }
    }
}

在每个人的个人资料上，我希望显示相关的班级和课程。我无法创建选择器来访问这些信息。

人员选择器

import { createSelector } from 'reselect';

const getPeopleDetails = createSelector(
    state => state.entities.people,
    (people) => people.allIds.reduce(
        (acc, cV) => {  
            if(people.byId[cV].isSelected) acc.push(people.byId[cV]); return acc; 
        }, [])
);

export default {
    getPeopleDetails
}

由于 createSelector 不接受任何参数，对于我在状态中的切片 courses，我应该如何创建一个选择器来获取当前所选人员档案的信息？

我是否需要创建一个连接表来描述实体之间的关系？

（我非常新于 react/redux）

- Vabs

Answer 1

您的选择器可以接受属性和状态。然后，您可以将其用作选择器的参数：

const getPerson = (state, props) =>
  state.entities.people.byId[props.id];

const getPersonDetails = createSelector(
  getPerson,
  state => state.entities.classes,
  (person, classes) => {
    // loop through classes, etc..
    // return whatever
  }
);

- Austin Greco

---

你好@Austin，感谢回复。我的应用程序遵循redux-ducks的原则。“Person”选择器不应查询它不负责的状态片段，对吗？ - Vabs

不应该，但是你可以使用相对的duck/branch公开的选择器来查询它。 - Andrea Carraro

Answer 2

我通过创建另一个名为ui的状态片段来解决这个问题。在那个片段中，我管理所选对象的ID。

当特定组件的所选ID有值时，才会呈现组件。每个组件都有一个if条件，检查ui片段是否填充了所选ID。

例如，

{
    "ui": {
        "personSelectedId": ["1"],
        "classSelectedId": ["class1", "class2"],
        "courseSelectedId": ["course1", "course2"],
    }
}

希望这有意义。

- Vabs