Add/remove object from redux store on one click

Question

I need to toggle somehove adding/removing object from redux store. It is like check/uncheck. I have following code:

const list = ({ id, item }) => {
  const isChecked = name => items.some(item => item.name === name);
  let itemClass = cx({
    item: true,      
    selected: isChecked(name),
  });
  return (
    <li className={itemClass}
        onClick={() => click(fullItem)} key={id}>
      <div className={styles.name}>
        {isChecked(name) ?
            (<span><i className={`fa fa-check`}></i>{name}</span>)
            : (<span>{name}</span>)
        }
      </div>
    </li>
  );
}


export const click = item => ({
  type: ADD_ITEM,
  payload: item,
});


import {
  ADD_ITEM,      
} from "../actions";

const initialState = {
  items: [],
}

export default (state = initialState, action) => {
  switch (action.type) {
    case ADD_ITEM:
      return {
        ...state,
        items: [action.payload],
      };  
    default:
      return state;
  }
};

but for now it only work for adding item to store, when I click on item when it is selected, it should remove it from the store. How can I toggle onclick removing/adding object to redux store?

I need to toggle somehove adding/removing object from redux store. — rick1
– rick1, Commented Oct 17, 2018 at 17:21

Alexander Staroselsky · Accepted Answer · 2018-10-17 18:01:50Z

You could try something like this. Changing the ADD_ITEM instead to a TOGGLE_ITEM where you check for existence of the item using something like Array.prototype.find. Adding if it does not exist, and removing it if it does exist:

export const click = item => ({
  type: TOGGLE_ITEM,
  payload: item,
});    

import {
  TOGGLE_ITEM,      
} from "../actions";

const initialState = {
  items: [],
}

export default (state = initialState, action) => {
  switch (action.type) {
    case TOGGLE_ITEM:
      const currentItem = state.items.find(item => item.id === action.payload.id);

      if (!currentItem) {            
        return {
          ...state,
          items: [...state.items, action.payload],
        };
      } else {
        const newItems = state.items.filter(item => item.id !== action.payload.id];

        return {
           ...state,
           items: [...newItems]
        };
      }
    default:
      return state;
  }
};

You may though want to consider having separate add, update, and delete actions, and dispatch the different actions accordingly from your components.

Asaf Aviv · Accepted Answer · 2018-10-17 17:36:19Z

0

export const click = item => ({
  type: TOGGLE_ITEM,
  payload: item,
});

import {
  TOGGLE_ITEM,      
} from "../actions";

const initialState = {
  items: [],
}

export default (state = initialState, action) => {
  switch (action.type) {
    case TOGGLE_ITEM:
      // check to see if the item already in our array
      // Array.some return true/false
      const itemAlreadyExists = state.items.some(item => item.id === action.payload.id)

      return {
        ...state,
        // if the item already in our array filter it
        // if not just add it
        items: itemAlreadyExists
          ? state.items.filter(item => item.id !== action.payload.id)
          : [...state.items, action.payload],
      };  
    default:
      return state;
  }
};

edited Oct 17, 2018 at 17:36

answered Oct 17, 2018 at 17:30

Asaf Aviv

11.8k2 gold badges33 silver badges47 bronze badges

Collectives™ on Stack Overflow

Add/remove object from redux store on one click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related