Как лучше всего удалять дубликаты элементов из массива в редукторе? - PullRequest
Новая
       48

Как лучше всего удалять дубликаты элементов из массива в редукторе?

1 голос
/ 08 апреля 2020

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

Как я могу предотвратить это? Нужно ли как-то отфильтровывать внутри редуктора или в моем событии handleChange флажок?

Я добавил небольшой фрагмент моего текущего кода

Спасибо! 

function handleCheckboxChange(e) {
    if (e.target.checked) {
      checkboxContext.dispatch({
        type: 'SET_PROPERTY_TYPE',
        payload: { [e.target.name]: e.target.checked }
      });
    }
  }
  
  
 const FilterCheckbox = ({ name, value, handleChange, checkedItems }) => (
  <Label>
    <FilterInput
      type="checkbox"
      name={name}
      value={value}
      onChange={handleChange}
      checked={checkedItems[name]}
    />
    {name}
  </Label>
);

export default FilterCheckbox;

// Sets the selected value...
 case 'SET_PROPERTY_TYPE':
      return {
        ...state,
        propertyType: [...state.propertyType, action.payload]
      };

1 Ответ

0 голосов
/ 08 апреля 2020

Да, вы можете просто отфильтровать state.propertyType, чтобы удалить любые дубликаты. 

// Sets the selected value...
 case 'SET_PROPERTY_TYPE':
      return {
        ...state,
        propertyType: [
            ...state.propertyType.filter((value) => 
                 Object.keys(value)[0] !== Object.keys(action.payload)[0]), 
            action.payload
        ]
      };

Вы также можете изменить state.propertyType на объект, чтобы сделать вещи лучше: 

  function handleCheckboxChange(e) {
    checkboxContext.dispatch({
      type: 'SET_PROPERTY_TYPE',
      payload: { [e.target.name]: e.target.checked }
    });
  }


 const FilterCheckbox = ({ name, value, handleChange, checkedItems }) => (
  <Label>
    <FilterInput
      type="checkbox"
      name={name}
      value={value}
      onChange={handleChange}
      checked={checkedItems[name]}
    />
    {name}
  </Label>
);

export default FilterCheckbox;

// Sets the selected value...
 case 'SET_PROPERTY_TYPE':
      return {
        ...state,
        propertyType: {
          ...state.propertyType, 
          ...action.payload
        }
      };

Вам также необходимо изменить способ отображения FilterCheckbox из состояния.

...