CODEWITHSUNDEEP
reactjs
Sammy Sung
Sammy Sung

Reputation: 311

Remove value from array in Reducer

So I currently have the following code. If the action is active, itll store the activity type in an array called SelectedActivityType. however, I am now trying to remove the activity type if the action is not active.

Any ideas:

const initialUserState = {
  selectedActivityType: [],
}

export const activityTypes = (state = selectedActivityType, action) => {
  switch (action.type) {
  case types.DIARY_UPDATE_ACTIVITY_TYPE:
    if(action.active) {
      return {
        ...state,
        selectedActivityType: [...state.selectedActivityType, action.activityTypeId],
      }
    } else {
      return {
        ...state,

      }
    }
  default: return state
  }
}

Upvotes: 0

Views: 73

Answers (1)

Kyle Richardson
Kyle Richardson

Reputation: 5645

I've taken your code here and modified it to use in snippet examples.

The below snippet will illustrate the problem. Current setup will push a value into the array even if it already exists. Meaning you will not have unique values in the Array. Run the snippet below and you will see a duplicate entry.

let STATE = {
  selectedActivityType: [ ]
};

const activityTypes = (state = selectedActivityType, action) => {
  switch (action.type) {
    case "UPDATE_ACTIVITY_TYPE":
      return {
       ...state,
        selectedActivityType: [...state.selectedActivityType, action.activityTypeId]
      }
    default: return state
    }
}

const addSelectedActivityType = (activityTypeId) => {
  return {
    type: "UPDATE_ACTIVITY_TYPE",
    activityTypeId
  }
};

STATE = activityTypes(STATE, addSelectedActivityType("testID"));
STATE = activityTypes(STATE, addSelectedActivityType("testID"));

console.log(STATE);

What we can do is make a helper function we will use in our reducer. If you run the below snippet you will see even though we tried to add the same value twice, the end result is only one entry.

let STATE = {
  selectedActivityType: [ ]
};

const activityTypes = (state = selectedActivityType, action) => {
  switch (action.type) {
    case "UPDATE_ACTIVITY_TYPE":
    
      if ( !existsInArray(
            state.selectedActivityType,
            action.activityTypeId
         ) ) {
           return {
           ...state,
            selectedActivityType: [...state.selectedActivityType, action.activityTypeId]
          }
         } else {
           return state;
         }
    default: return state
    }
}

const addSelectedActivityType = (activityTypeId) => {
  return {
    type: "UPDATE_ACTIVITY_TYPE",
    activityTypeId
  }
};

STATE = activityTypes(STATE, addSelectedActivityType("testID"));
STATE = activityTypes(STATE, addSelectedActivityType("testID"));

console.log(STATE);

// helper function

function existsInArray( array, value ) {
  let i;
  const length = array.length;
  for ( i = 0; i < length; i++ ) {
    if ( array[ i ] === value ) return true;
  }
  return false;
}

Now that we know entries in the array are unique we can easily remove entries from the array with another helper function. View below snippet to get the gist!

let STATE = {
  selectedActivityType: [ "testID", "anotherID" ]
};

const activityTypes = (state = selectedActivityType, action) => {
  switch (action.type) {
    case "REMOVE_ACTIVITY_TYPE":
      removeFromArray(
        state.selectedActivityType,
        action.activityTypeId
      );
      
      return state;
    default: return state
    }
}

const removeSelectedActivityType = (activityTypeId) => {
  return {
    type: "REMOVE_ACTIVITY_TYPE",
    activityTypeId
  }
};

console.log( STATE );

STATE = activityTypes(STATE, removeSelectedActivityType("testID"));

console.log(STATE);

// helper functions

function existsInArray( array, value ) {
  let i;
  const length = array.length;
  for ( i = 0; i < length; i++ ) {
    if ( array[ i ] === value ) return true;
  }
  return false;
}

function removeFromArray( array, value ) {
  let index = array.indexOf( value );

  if ( index > -1 ) {
    array.splice( index, 1 );
  }
}

Hope this helps. Ask questions if you need to.

Upvotes: 1

Related Questions