Angular基础Store实现接收数据为空：TypeError: action.data未定义排查

结合你的问题描述和代码片段，我梳理了几个最常见的坑，帮你快速排查：

1. map操作符未正确返回排序后的任务数组 #

RxJS的map操作符需要明确返回处理后的数据，如果你的排序逻辑里漏掉了return，整个数据流就会变成undefined，后续do操作符拿到的自然是空数据。

举个错误例子：

// 错误：sort修改了原数组，但map里没return，最终返回undefined
this.http.get('/api/tasks')
  .map(tasks => {
    tasks.sort((a, b) => a.id - b.id); // 仅修改原数组，无返回值
  })
  .do(sortedTasks => this.store.dispatch({ type: 'LOAD_TASKS', data: sortedTasks }))

修正写法：

// 正确：直接return排序后的数组（sort方法本身会返回原数组，可链式调用）
this.http.get('/api/tasks')
  .map(tasks => tasks.sort((a, b) => a.id - b.id))
  .do(sortedTasks => this.store.dispatch({ type: 'LOAD_TASKS', data: sortedTasks }))

2. 未订阅Observable导致数据流未触发 #

RxJS的冷Observable（比如HTTP请求返回的Observable）必须被订阅才会执行。如果你的代码只构建了数据流链，但没调用.subscribe()，那map和do都不会执行，HTTP请求甚至都不会发送，Store自然收不到数据。

记得在链末尾加上订阅：

this.http.get('/api/tasks')
  .map(tasks => tasks.sort((a, b) => a.id - b.id))
  .do(sortedTasks => this.store.dispatch({ type: 'LOAD_TASKS', data: sortedTasks }))
  .subscribe(); // 必须订阅才会触发整个流程

3. HTTP响应结构与预期不符 #

如果后端返回的响应不是直接的任务数组，而是包裹在某个字段里（比如{ data: [task1, task2] }），直接对response做sort操作会出错，甚至得到undefined。

这种情况要先提取真正的任务数组：

this.http.get('/api/tasks')
  .map(response => response.data.sort((a, b) => a.id - b.id)) // 先取出response中的任务列表
  .do(sortedTasks => this.store.dispatch({ type: 'LOAD_TASKS', data: sortedTasks }))
  .subscribe();

4. do操作符中构造action时的变量错误 #

如果在do操作符里分发Store action时，变量名写错（比如把sortedTasks写成task），或者没有正确传递数据流中的值，也会导致action.data为undefined。

检查你的action构造代码：

// 错误：变量名错误或未传递数据流中的值
.do(() => this.store.dispatch({ type: 'LOAD_TASKS', data: task })) 
// 正确：传递数据流中的排序后任务
.do(sortedTasks => this.store.dispatch({ type: 'LOAD_TASKS', data: sortedTasks }))

快速调试技巧 #

建议在map和do里加console.log，打印中间数据，快速定位问题节点：

this.http.get('/api/tasks')
  .map(tasks => {
    console.log('原始任务数据:', tasks);
    return tasks.sort((a, b) => a.id - b.id);
  })
  .do(sortedTasks => {
    console.log('排序后的数据:', sortedTasks);
    this.store.dispatch({ type: 'LOAD_TASKS', data: sortedTasks });
  })
  .subscribe();

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