Styjun

Here is my component i just list some elements

import React, Component from "react";

import connect from "react-redux";
import delFruit from "../../js/actions/index";

function mapDispatchToProps(dispatch)

 console.log(dispatch);
 return 
 delFruit: fruits => dispatch(delFruit(fruits))
 ;


const mapStateToProps = state => 
 return fruits: state.fruits;
;



class ConnectedList extends Component 
 constructor()
 
 super();
 this.handleClick = this.handleClick.bind(this);
 

 handleClick(el)
 
 this.props.delFruit(el)
 

 render()
 
 // const fruits = this.state.fruits

 return (
 <div>
 <div className="title">Liste des courses</div>
 <ul className="list-group list-group-flush">
 
 this.props.fruits.map((el, key) => (
 <li key=key>
 el.name <i>( el.price € )</i> <i className="delete" onClick=this.handleClick.bind(this, key)></i>
 </li>
 ))
 
 </ul>
 </div>
 );

 



const List = connect(mapStateToProps, mapDispatchToProps)(ConnectedList);

export default List;

When i want to delete an element i use this script

import ADD_FRUIT, DELETE_FRUIT, DOUBLE_FRUIT from "../constants/action-types";
import fruits from "../../data/fruits";
const initialState = 
 fruits: fruits['elements'],
;

function rootReducer(state = initialState, action)

 if (action.type === ADD_FRUIT) 
 return Object.assign(, , 
 fruits: state.fruits.concat(action.payload)
 );
 
 if (action.type === DELETE_FRUIT) 
 delete state.fruits[action.payload];

 return Object.assign(, , 
 fruits:state.fruits
 );

 
 if (action.type === DOUBLE_FRUIT) 
 
 return state;


export default rootReducer;

When i inspect the state of my component , the element is properly deleted (in example #2)

But my component does not remove it from the list

The only way i manage to make it work is doing this

return Object.assign(, , 
 fruits:state.fruits.concat()
 );

instead of

return Object.assign(, , 
 fruits:state.fruits
 );

• why my component is not updated without concat()


• How is the good way of doing it


• why my array keep a null value after deleting

You can delete that using spread operator. Here's a basic snippet showing how to do that.

const state = 
 fruits: [1,2,3]


const action = 
 index: 1


const newState = [
 ...state.fruits.slice(0, action.index),
 ...state.fruits.slice(action.index + 1)
 ];

console.log(newState);

So you can modify your code to:

if (action.type === DELETE_FRUIT) 
 return 
 ...state,
 fruits: [
 ...state.fruits.slice(0, action.payload),
 ...state.fruits.slice(action.payload + 1)
 ]