规范化状态的 Redux 选择器
Redux Selector for normalized state
我需要帮助为根据 redux docs
中的文档规范化的状态创建选择器
州
{
"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
的状态切片;我如何创建一个选择器,从哪里获取当前选定人员个人资料的信息?
我应该创建一个联结点 table 来描述实体之间的关系吗?
(我对react/redux很陌生)
你的选择器可以接受 props 和 state。然后你可以将它用作选择器的参数:
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
}
);
我通过创建另一个名为 ui
的状态切片解决了这个问题。在该切片中,我管理选定的对象 ID。
当特定组件的选定 Id 中有值时,将呈现组件。每个组件都有一个 if
条件,用于检查 ui
切片是否填充了选定的 ID。
例如,
{
"ui": {
"personSelectedId": ["1"],
"classSelectedId": ["class1", "class2"],
"courseSelectedId": ["course1", "course2"],
}
}
希望这是有道理的。
我需要帮助为根据 redux docs
中的文档规范化的状态创建选择器州
{
"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
的状态切片;我如何创建一个选择器,从哪里获取当前选定人员个人资料的信息?
我应该创建一个联结点 table 来描述实体之间的关系吗?
(我对react/redux很陌生)
你的选择器可以接受 props 和 state。然后你可以将它用作选择器的参数:
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
}
);
我通过创建另一个名为 ui
的状态切片解决了这个问题。在该切片中,我管理选定的对象 ID。
当特定组件的选定 Id 中有值时,将呈现组件。每个组件都有一个 if
条件,用于检查 ui
切片是否填充了选定的 ID。
例如,
{
"ui": {
"personSelectedId": ["1"],
"classSelectedId": ["class1", "class2"],
"courseSelectedId": ["course1", "course2"],
}
}
希望这是有道理的。