Удалить элемент из массива в редуксе

Question

Я пытаюсь добавить / удалить элементы из массива, используя приставку, элементы будут добавлены в массив, но когда я пытаюсь удалить элемент, похоже, что он мутирует в массив и добавляет элементы вместо удаления

мое состояние выглядит примерно так после попытки добавить / удалить элементы

[item1, item2, [item1, item2]]

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

состояние

state.filtered.cities: []

Filter.js

import React from 'react'
import styled from 'styled-components'
import { connect } from 'react-redux'
import * as actions from './actions'

class Filter extends React.Component {

  handlecity = (city) => {
    this.props.addCity(city)
  }

  handleRemoveCity = (city) => {
    this.props.removeCity(city)
  }



  render() {

    const options = [
   'item1','item2'
    ]

    return(
      <Wrap>
        {options.map((option,index) =>
          <Cell>
            <OptionWrap key={index} onClick={()=> this.handlecity(option)}>
              {option}
            </OptionWrap>
            <OptionWrap key={index} onClick={()=> this.handleRemoveCity(option)}>
              remove {option}
            </OptionWrap>
            {console.log(this.props.city && this.props.city)}
          </Cell>
        )}
      </Wrap>
    )
  }
}

const mapStateToProps = state => ({
  city: state.filtered.cities
})

const mapDispatchToProps = {
  ...actions,
}

export default connect(mapStateToProps, mapDispatchToProps)(Filter);

actions.js

import {
  ADD_CITY, REMOVE_CITY
} from '../../Constants'

export function addCity(city) {
  return {
    type: 'ADD_CITY',
    city
  }
}

export function removeCity(city) {
  return {
    type: 'REMOVE_CITY',
    city
  }
}

reducer.js

import {
  ADD_CITY, REMOVE_CITY
} from '../Constants';

const cityReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_CITY:
      return [
        ...state,
        action.city
      ]
    case REMOVE_CITY:
      return [
        ...state,
        state.filter(city => city !== action.city),
      ]
    default:
      return state;
  }
}

export default cityReducer;

Answer 1

Почему бы просто:

reducer.js

import {
  ADD_CITY, REMOVE_CITY
} from '../Constants';

const cityReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_CITY:
      return [
        ...state,
        action.city
      ]
    case REMOVE_CITY:
      return state.filter(city => city !== action.city)
    default:
      return state;
  }
}

export default cityReducer;

Answer 2

Ваш удаленный городской редуктор должен выглядеть как

case REMOVE_CITY:
  return [
    ...state.filter(city => city !== action.city),
  ]

В противном случае вы добавляете все предыдущие элементы плюс отфильтрованный список.