根据文档,by id 选择器具有以下签名:selectById: (state: V, id: EntityId) => T | undefined
.
因此,您可以通过以下方式在组件中调用它:
const Component = ({ id }) => {
const item = useSelector((state) =>
selectUserById(state, id)
);
};
如果您在服务器上对实体进行排序/过滤,这种“规范化”的实现可能不起作用,因为状态看起来更像:
{
data: {
entityType: {
//query is key and value is status and result
// of the api request
'sort=name&page=1': {
loading: false,
requested: true,
error: false,
stale: false,
ids: [1, 2],
},
'sort=name:desc&page=1': {
//would have loading, requested ....
ids: [2, 1],
},
data: {
//all the data (fetched so far)
'1': { id: 1 },
'2': { id: 2 },
},
},
},
};
我没有与“助手”合作过,因此必须对其进行研究,因为它可能有助于服务器端过滤和排序。
我也怀疑它会记住选择器:
const List = ({ items }) => (
<ul>
{items.map(({ id }) => (
<Item key={id} id={id} />
))}
</ul>
);
const Item = React.memo(function Item({ id }) {
//selectUserById is called with different id during
// a render and nothing will be memoized
const item = useSelector((state) =>
selectUserById(state, id)
);
});
我创建了一个简短的文档,介绍如何使用通过重新选择创建的选择器。