Remove item from array in redux
11,054
Solution 1
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;
Solution 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.
Related videos on Youtube
Author by
tom harrison
Updated on June 04, 2022Comments
-
tom harrison almost 2 years
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;