Redux Toolkit账单状态去重问题求助：避免重复ID账单

核心问题分析 #

你的两次尝试都没解决根本问题：

1. 第一次尝试：错误使用productId作为唯一标识（需求是billId），且逻辑上每次都会过滤掉所有匹配项再添加新数据，导致每次dispatch都只会保留最新的一条账单，而非保留不同billId的账单。
2. 第二次尝试：在selector中处理去重属于治标不治本——store本身仍会存储重复账单，且依赖lastBill的逻辑只能处理最后一次添加的重复项，无法覆盖所有历史重复数据。

正确的做法是在reducer层面直接处理去重，保证store中的billItems本身就不存在重复的billId。

解决方案 #

根据你的需求（不允许相同billId的账单存在），提供两种常见处理逻辑：

方案1：存在则替换，不存在则新增 #

如果需要更新已有账单的信息（比如账单名称修改），使用此逻辑：

import { createSlice } from '@reduxjs/toolkit';

export const billSlice = createSlice({
  name: "bill",
  initialState: {
    billItems: [],
  },
  reducers: {
    addOrUpdateBill: (state, action) => {
      // 查找是否已有相同billId的账单
      const existingBillIndex = state.billItems.findIndex(
        item => item.billId === action.payload.billId
      );
      
      if (existingBillIndex !== -1) {
        // 存在则替换该账单
        state.billItems[existingBillIndex] = action.payload;
      } else {
        // 不存在则添加新账单
        state.billItems.push(action.payload);
      }
    },
    // 可选：删除指定billId的账单
    removeBill: (state, action) => {
      state.billItems = state.billItems.filter(
        item => item.billId !== action.payload.billId
      );
    }
  },
});

export const { addOrUpdateBill, removeBill } = billSlice.actions;
export default billSlice.reducer;

方案2：存在则不添加，不存在则新增 #

如果仅需避免重复添加，不需要更新已有账单信息，使用此逻辑：

import { createSlice } from '@reduxjs/toolkit';

export const billSlice = createSlice({
  name: "bill",
  initialState: {
    billItems: [],
  },
  reducers: {
    addBillIfNotExists: (state, action) => {
      // 检查是否已有相同billId的账单
      const isDuplicate = state.billItems.some(
        item => item.billId === action.payload.billId
      );
      
      if (!isDuplicate) {
        state.billItems.push(action.payload);
      }
    }
  },
});

export const { addBillIfNotExists } = billSlice.actions;
export default billSlice.reducer;

使用说明 #

在组件中调用对应的action即可：

// 添加或更新账单
dispatch(addOrUpdateBill({ billId: 5, billName: "水电费" }));

// 仅添加不重复账单
dispatch(addBillIfNotExists({ billId: 6, billName: "物业费" }));

这种方式直接在reducer中维护数据的唯一性，确保store中的数据始终符合要求，避免后续使用时出现重复数据的问题。

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