我不想将重复数据添加到我的 redux 存储数组中

Question

我想将唯一数据添加到我的存储数组中，但似乎在添加数据时卡住了，并且重复数据被推入数组。我正在使用打字稿。

所以我的切片函数看起来像这样。

const initialState = {
  dropDownData:{
  programs: [],
  years: []
 }
}

const slice = createSlice({
  name:"filterSlice",
  initialState: initialState,
  reducers:{
     updateProgram:(state, action) => {
 state.dropDownData.programs = [...state.dropDownData.programs, action.payload];
   }
 }
});

我是这样调用这个 reducer 函数的：dispatch(updateProgram(program))

所以我得到的程序是数组形式的。但是我不需要程序数组中的重复数据。

那么如何更新我的 reducer 函数。

Answer 1

而不是这个：

state.dropDownData.programs = [...state.dropDownData.programs, action.payload];

使用这个：

state.dropDownData.programs = [...(new Set([...state.dropDownData.programs, action.payload]))];

方法：

javascript Set 允许仅保留参数中的唯一元素。
因此，当使用现有两个数组中的元素创建 new Set 时，Set 将仅保留唯一元素。
接下来，我们需要使用 ... spread-operator 将 Set 转换回数组。

我不想将重复数据添加到我的 redux 存储数组中

I don't want to add duplicate data into my redux store array

javascript

frontend

typescript

reactjs

redux