I want to add unique data into my store array, but seems to stuck while adding the data and duplicate data is getting pushed into array. I am using typescript.

So my slice function looks like this.

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

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

I am calling this reducer function in this way: dispatch(updateProgram(program))

So the program i am getting is in the form of array. But I don't need duplicate data from the program array.

So how to update my reducer function.

CodePudding user response：

Instead of this:

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

Use this:

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

Approach:

• The javascript Set allows one to retain only unique elements from the parameter.
• Thus, when a new Set is created with elements from existing two arrays, the Set will keep only the unique elements.
• Next, we need to use the ... spread-operator to transform the Set back into an array.