Добавить / удалить объект из магазина приставок в один клик

Question

Мне нужно переключиться, как добавить / удалить объект из хранилищаЭто как проверить / снять галочку.У меня есть следующий код:

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;
  }
};

, но пока он работает только для добавления элемента в магазин, когда я нажимаю на элемент, когда он выбран, он должен удалить его из магазина.Как включить / отключить удаление / добавление объекта в онлайн-хранилище?

Answer 1

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;
  }
};

Answer 2

Вы можете попробовать что-то вроде этого.Вместо этого изменив ADD_ITEM на TOGGLE_ITEM, где вы проверяете наличие элемента, используя что-то вроде Array.prototype.find .Добавление, если оно не существует, и удаление, если оно существует:

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;
  }
};

Возможно, вы захотите рассмотреть возможность использования отдельных действий добавления, обновления и удаления, а также соответственно распределять различные действия из ваших компонентов.