¿Cómo puedo eliminar un elemento específico (por id) del almacenamiento local usando reaccionar (redux - persistir)? handleSubmit funciona bien, pero handleDelete no. Tengo esto:
handleSubmit = event => { event.preventDefault(); this.props.addWeather(this.state.weatherCity); this.setState({ weatherCity: "" }); }; handleDelete = (event, id) => { this.props.deleteWeather(this.state.weatherCity); this.setState({ weatherCity: "" }); } const mapStateToProps = state => ({ allWeather: state.allWeather }); const mapDispatchToProps = dispatch => bindActionCreators(WeatherActions, dispatch); export default connect(mapStateToProps, mapDispatchToProps)(WeatherList);Y botón en formulario para llamar a handleDelete:
<form onSubmit={this.handleDelete}><button type="submit" id="add" onClick={this.handleDelete}>Remove City</button></form>Mi almacenamiento local:
allWeather: "[{\"id\":0.5927975642362653,\"city\":\"Toronto\"},{\"id\":0.8124764603718682,\"city\":\"Fortaleza\"},{\"id\":0.9699736666575081,\"city\":\"Porto\"},{\"id\":0.852871998478355,\"city\":\"Tokio\"},{\"id\":0.8854642571682461,\"city\":\"New York\"}]"Mi reductor:
export default function allWeather(state = [], action) { switch (action.type) { case "ADD_WEATHER": return [...state, { id: Math.random(), city: action.payload.city }]; case "DELETE_ITEM": return [...state, state.weatherCity.filter((event, id) => id !== action.payload.id)]; default: return state; } }Y acciones:
export const deleteWeather = id => ({ type: "DELETE_ITEM", payload: { id } });Agradezco cualquier ayuda.
Su problema es que está utilizando el operador de propagación, que primero copia el contenido del estado actual. Luego, está agregando los elementos que fueron devueltos por el método de filtro. Así que no estás eliminando sino agregando. Para eliminar de una matriz, use solo el método de filtro, sin el operador de propagación como ese:
return state.filter( (city) => city.id !== action.payload.id )
Además, el estado es una matriz, no un objeto, por lo que no es válido state.weatherCity .