NgRx Angular 5项目中Array.reduce函数用法求解析

嘿，我来帮你搞定这个Angular 5 NgRx的reducer问题～ 你现在要处理的是FETCH_TODO_SUCCESS这个action，把返回的待办数组更新到state里对吧？首先得记住NgRx的核心原则：reducer是纯函数，必须返回新的状态对象，绝对不能修改原state。

先给你一个最基础的正确写法，假设你的state里有一个todos字段用来存储待办数组：

case todosAction.FETCH_TODO_SUCCESS: {
  return {
    ...state, // 展开原state的所有属性，保留不需要修改的部分
    todos: action.payload // 直接把payload里的完整待办数组赋值给todos字段
  };
}

几种常见的扩展场景 #

如果你的业务场景需要额外处理数组，比如合并现有数据或者去重，可以参考下面的写法：

• 合并新旧待办数组（比如分页加载）：

  case todosAction.FETCH_TODO_SUCCESS: {
    return {
      ...state,
      todos: [...state.todos, ...action.payload] // 把新数组的项追加到旧数组后面，生成新数组
    };
  }
  

• 按ID去重合并（避免重复数据）：
  如果多次触发fetch可能拿到重复ID的待办，用Map来保证每个ID唯一：

  case todosAction.FETCH_TODO_SUCCESS: {
    // 合并新旧数组后，用id作为key去重
    const mergedTodos = Array.from(
      new Map([...state.todos, ...action.payload].map(item => [item.id, item])).values()
    );
    return {
      ...state,
      todos: mergedTodos
    };
  }
  

关键注意事项 #

• 绝对不要直接修改原state，比如state.todos = action.payload这种写法是错误的！会破坏NgRx的不可变状态机制，导致组件无法检测到状态变化。
• 建议用TypeScript给action的payload定义类型，避免类型错误：

  // 先定义Todo接口
  interface Todo {
    id: string;
    message: string;
    done: boolean;
  }
  
  // 然后在action里指定payload类型
  class FetchTodoSuccess implements Action {
    readonly type = todosAction.FETCH_TODO_SUCCESS;
    constructor(public payload: Todo[]) {}
  }
  

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