CODEWITHSUNDEEP
javascriptreactjstypescriptreduxfrontend
Swapnil Chaturvedi
Swapnil Chaturvedi

Reputation: 97

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

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.

Upvotes: 1

Views: 616

Answers (2)

Jose Emanuel Delgado
Jose Emanuel Delgado

Reputation: 1

i try this and works for me:

> addToMyList: (state, action: PayloadAction<Movie>) => {
>  if (!state.myList?.find((movie) => movie.id === action.payload.id)) {
>    state.myList = state.myList ? [action.payload, ...state.myList] : 
>     [action.payload];
>   }
> }

Upvotes: 0

jsN00b
jsN00b

Reputation: 3691

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.

Upvotes: 5

Related Questions