如何在Redux及Redux Toolkit中使用redux-orm？报错及替代库咨询

错误修复方案 #

你遇到的 TypeError: Cannot read property 'Article' of undefined 错误按以下步骤排查修复即可：

1. 补全orm.js的实例导出
   你当前orm.js代码没有对外导出创建的orm实例，ArticleList.js中导入的orm会是undefined，自然无法读取Article属性，在orm.js末尾添加导出语句：

export default orm;

同时检查ArticleList.js中导入orm的路径是否正确，和orm.js的实际存储位置匹配。

2. 根reducer挂载orm reducer
   你在初始化ORM时设置了stateSelector: state => state.orm，需要确保根reducer中已经把redux-orm生成的reducer挂载到orm字段：

import { combineReducers } from 'redux';
import orm from './orm';

const rootReducer = combineReducers({
  // 必须添加这行，否则state.orm为undefined会触发连锁报错
  orm: orm.reducer(),
  // 其他业务reducer
})

3. 修正selector写法
   你当前的selector写法不符合redux-orm的API规范，正确的全量Article查询写法如下：

import orm from './orm';
import { createSelector } from 'redux-orm';

const articlesSelector = createSelector(
  orm,
  session => session.Article.all().toRefArray() // 要普通JS对象用toRefArray，要模型实例用toModelArray
);

// 组件内调用
const ormArticles = useSelector(articlesSelector);

4. 修正Article模型reducer逻辑
   模型reducer不需要返回session，操作完成后默认返回undefined即可，你当前写的return session属于冗余逻辑，可能会导致状态更新异常，直接删除该行即可。

同类库替代推荐 #

redux-orm目前已经停止维护，社区案例少确实是现状，Redux生态下优先推荐以下更成熟的方案：

• RTK Query：Redux官方维护的官方数据缓存方案，属于Redux Toolkit内置能力无需额外安装，原生支持关联数据的范式化存储，生态完善、文档齐全，是目前Redux项目处理服务端数据的主流选择，完全覆盖redux-orm的使用场景。
• normalizr：专注于数据范式化的轻量工具，稳定迭代多年，使用案例非常多，如果只需要把嵌套接口数据转成扁平结构存在Redux中，不需要复杂的ORM查询能力，这个工具的使用成本远低于redux-orm。

内容的提问来源于stack exchange，提问作者newBike