I am trying to add/remove items from an array using redux, the items will add to the array but when I try to remove an item, it looks like it is mutating the array and adding items instead of removing

my State looks similar to this after trying to add/remove items

[item1, item2, [item1, item2]]

How can I remove items from my array?

state

state.filtered.cities: []

Filter.js

import React from 'react'
import styled from 'styled-ponents'
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;

I am trying to add/remove items from an array using redux, the items will add to the array but when I try to remove an item, it looks like it is mutating the array and adding items instead of removing

my State looks similar to this after trying to add/remove items

[item1, item2, [item1, item2]]

How can I remove items from my array?

state

state.filtered.cities: []

Filter.js

import React from 'react'
import styled from 'styled-ponents'
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;

• javascript
• reactjs
• redux
• react-redux

• Possible duplicate of Is this the correct way to delete an item using redux? – n1stre Commented Sep 11, 2018 at 9:33
• it's similar but I came across this question and couldn't work it out from the answers there... – tom harrison Commented Sep 11, 2018 at 9:37

2 Answers 2

Why not simply:

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;

Your remove city reducer should look like

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

Otherwise you're adding all the previous items plus the filtered list.