Remove item from array in redux

Question

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

Possible duplicate of Is this the correct way to delete an item using redux? — n1stre
– 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
– tom harrison, Commented Sep 11, 2018 at 9:37

Mathieu K. · Accepted Answer · 2018-09-11 09:30:02Z

12

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;

answered Sep 11, 2018 at 9:30

Mathieu K.

9331 gold badge8 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jamiec · Accepted Answer · 2018-09-11 09:29:58Z

2

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.

answered Sep 11, 2018 at 9:29

Jamiec

136k15 gold badges141 silver badges202 bronze badges

Collectives™ on Stack Overflow

Remove item from array in redux

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related