Redux Reducer中数组对象的更新与重定位实现问询

嘿，这个需求其实挺常见的，结合你已经掌握的Immutable对象更新方法，只需要再处理一下数组的重组就搞定了。我给你两种常用的实现方式，你可以根据自己的技术栈来选：

方法一：原生纯函数实现（无额外库） #

这种方式不需要依赖第三方库，完全用JS原生的数组方法和展开运算符来实现Immutable操作，逻辑很直观：

1. 先从原数组里找到要更新的目标对象
2. 用你熟悉的Immutable方式（比如对象展开）创建更新后的对象
3. 用更新后的对象作为新数组的第一个元素，后面跟上原数组中排除了旧目标对象的所有元素

代码示例：

// 假设你的初始state是这样的对象数组
const initialState = [
  { id: 11, name: "商品A" },
  { id: 12, name: "商品B" },
  { id: 13, name: "商品C" }
];

// 定义更新并移至首位的纯函数
const updateItemToTop = (currentState, targetId, updateData) => {
  // 找到目标对象
  const targetItem = currentState.find(item => item.id === targetId);
  if (!targetItem) return currentState; // 找不到就返回原state
  
  // Immutable更新对象（这里用你已经会的方式，比如对象展开）
  const updatedItem = { ...targetItem, ...updateData };
  
  // 构建新数组：更新后的对象 + 原数组中排除旧对象的元素
  return [updatedItem, ...currentState.filter(item => item.id !== targetId)];
};

// 调用示例：更新id=12的对象，把name改成"更新后的商品B"，并移到首位
const newState = updateItemToTop(initialState, 12, { name: "更新后的商品B" });

方法二：用Immer简化操作（推荐） #

如果你已经在使用Immer来处理Immutable更新，那可以用它的draft语法来更直观地操作数组，代码可读性更好：

import produce from 'immer';

const updateItemToTop = (currentState, targetId, updateData) => {
  return produce(currentState, draft => {
    // 找到目标对象的索引
    const targetIndex = draft.findIndex(item => item.id === targetId);
    if (targetIndex === -1) return;
    
    // 取出目标对象并更新
    const updatedItem = { ...draft[targetIndex], ...updateData };
    
    // 从draft中移除旧对象
    draft.splice(targetIndex, 1);
    
    // 把更新后的对象插入到数组首位
    draft.unshift(updatedItem);
  });
};

// 调用方式和上面一样
const newState = updateItemToTop(initialState, 12, { name: "更新后的商品B" });

关键点说明 #

不管用哪种方式，核心逻辑都是不修改原数组，而是返回一个全新的数组，这符合Immutable的原则。而且先排除旧对象再插入新对象的操作，能避免数组出现重复元素。

如果是在Redux或者其他状态管理库的reducer里使用，直接把这个函数的逻辑套进去就行，完全符合纯函数的要求~

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