React Redux Toolkit中createEntityAdapter的setAll数字ID场景异常咨询
问题原因分析
- 本质原因是JavaScript对象的属性排序规则和Redux Toolkit实体适配器的设计逻辑共同导致的现象:
- 实体适配器
createEntityAdapter的设计中,entities对象仅用来存储id到实体数据的映射,本身不维护顺序,真正控制数据排序的是ids数组,所有适配器提供的查询方法(比如selectAll)都是按照ids数组的顺序来返回有序数据的。 - 重排序操作本身没有修改任何实体对象的属性值,只是调整了元素顺序,因此
entities对象的内容不需要更新,你观察到的entities不变属于正常现象。 - 当
id为纯数字字符串时,会触发JS对象的特殊排序规则:所有可以转为非负整数的字符串属性,会优先按数字升序排列展示,不会遵循插入顺序;而非数字字符串的属性才会按插入顺序展示。所以你在调试工具中看到的entities键顺序没有变化,只是展示层面的问题,不影响实际功能。
- 实体适配器
常见异常场景和解决方案
- 如果你实际使用中出现了数据排序错误,几乎都是因为你没有使用适配器提供的标准查询方法,而是直接遍历
entities对象导致的:错误用法示例:直接调用
Object.values(state.board.entities)获取数组,此时返回的顺序会遵循JS对象的属性排序规则,和ids数组顺序不一致。
正确用法:使用适配器生成的selector获取有序数据,例如const allItems = boardSelectors.selectAll(state),返回结果永远和ids数组顺序保持一致。 - 如果你希望调试工具中
entities的展示顺序和排序结果一致,可以给所有id增加统一的非数字前缀,避免id被识别为数字索引,例如将'1'改为'item_1'即可。
内容的提问来源于stack exchange,提问作者Er.Se
相关产品推荐
相关产品推荐

