Reputation: 71
I have problem with updating component when remove element from redux state.
my component:
const mapStateToProps = state => ({
products: state.shoppingBasket.list,
});
const ShoppingBasket = React.createClass({
propTypes: {
removeProduct: React.PropTypes.func.isRequired,
products: React.PropTypes.array,
open: React.PropTypes.func.isRequired,
},
removeFromBasket(index, name) {
this.props.removeProduct(index);
},
render() {
return (
<div>
{this.props.products.map((product, index) => (
<div key={index}>
product.name
<button onClick={() => this.RemoveFromBasket(index)}
</div>
);
)}
</div>
);
},
});
export default connect(mapStateToProps, actions)(ShoppingBasket);
my reducer:
export default function shoppingBasket(
state = {
list: [],
},
action
) {
let tmp = [];
switch (action.type) {
case SHOPPING_BASKET_ADD:
return { list: [...state.list, action.payload.product] };
case SHOPPING_BASKET_REMOVE:
tmp = state.list;
tmp.splice(action.payload.index, 1);
return { list: tmp };
default:
return state;
}
}
When insert element in redux state my component successfuly update, but when i click on button and call removeFromBasket
element was remove from redux state but commponent shouldn't update.
Upvotes: 1
Views: 1038
Reputation: 6684
splice
doesn't return new array but only mutates array on which it's called so refernce to list
property doesn't change. In Redux you must always return new state object (never mutate state) otherwise your component will not updated because internally it performs shallow comparision of current and next properties so if references hasn't changed it considers them equal and prevents component re-render. You can remove item fron an array in a Redux way
like this:
case SHOPPING_BASKET_REMOVE:
return { list: [
...state.list.slice(0, action.payload.index),
...state.list.slice(action.payload.index + 1)
]
}
Upvotes: 3