Reducer初始化状态测试报错：无法读取undefined的GROUP_LIST_REQUEST属性

问题分析 #

从你的错误堆栈和代码细节来看，核心问题是模块循环依赖导致的action常量未定义：

• 你的group reducer导入了actions/group.js
• actions/group.js又导入了api.js
• api.js导入了store.js
• store.js导入了合并后的reducers（包括group reducer）

这就形成了一个闭环：当测试加载group reducer时，整个依赖链被触发加载，而在这个过程中，actions/group.js的模块还未完成初始化（因为它依赖的api/store还在加载reducer），所以reducer尝试从actions/group.js导入常量时，得到的是undefined，自然就会抛出Cannot read property 'GROUP_LIST_REQUEST' of undefined的错误。

另外你看到的{ type: '@@redux/INIT' }是Redux在创建store时自动发送的初始化action——因为循环依赖导致store在测试加载过程中被意外创建，所以你的reducer收到了这个action，而此时常量还未定义，直接触发了错误。

解决方案 #

最直接且规范的解决方式是将action常量抽离到独立的文件中，打破循环依赖链：

1. 创建独立的常量文件 #

新建constants/group.js，把所有group相关的action常量移到这里：

export const GROUP_LIST_REQUEST = 'GROUP_LIST_REQUEST';
export const GROUP_LIST_SUCCESS = 'GROUP_LIST_SUCCESS';
export const GROUP_LIST_FAILURE = 'GROUP_LIST_FAILURE';

2. 修改Reducer的导入路径 #

更新app/reducers/group.js，从常量文件导入而不是从action文件导入：

import { GROUP_LIST_REQUEST, GROUP_LIST_SUCCESS, GROUP_LIST_FAILURE } from '../constants/group';

export const initialState = {
  selected: null,
  fetching: false,
  fetched: false,
  error: null,
  items: [],
};

export default function group(state = initialState, action) {
  switch (action.type) {
    case GROUP_LIST_REQUEST:
      return {
        ...state,
        fetching: true,
        fetched: false,
      };
    case GROUP_LIST_SUCCESS:
      return {
        ...state,
        fetching: false,
        fetched: true,
        items: action.groupList ?? [],
      };
    case GROUP_LIST_FAILURE:
      return {
        ...state,
        fetching: false,
        fetched: false,
      };
    default:
      return state;
  }
}

3. 修改Action文件的导入路径 #

更新app/actions/group.js，同样从常量文件导入：

import { GROUP_LIST_REQUEST, GROUP_LIST_SUCCESS, GROUP_LIST_FAILURE } from '../constants/group';

// 你的action创建函数代码...

4. 验证测试 #

现在重新运行测试，循环依赖被打破，reducer可以正常加载常量，测试时只会收到你传入的空对象action，不会再触发Redux的初始化action，测试就能正常执行了。

额外建议 #

• 保持Redux代码的分离原则：常量、actions、reducers各自独立，避免互相依赖，这能有效防止循环依赖问题。
• 如果你的api.js需要访问store，可以考虑使用Redux中间件（比如redux-thunk）来获取store，而不是直接导入store实例，这也是避免循环依赖的常用技巧。

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