Component Not Updating React/Redux - reactjs

Question

I am using Redux on my app. I have an Items component connected to redux. It passes down props to individual Item components.I also have a ItemEditModal component that edits the individual component. The problem i'm facing is that when i edit an Item through the ItemEditModal, the Items component does not update eventhough the redux did change. Here is relevant parts of my code:
my reducer file ..
this is the action to focus on: actionTypes.SET_EDIT_SELECTED_ITEM
const reducer = (state=initialState, action) => {
switch(action.type) {
case (actionTypes.SET_EDIT_SELECTED_ITEM):
let set_edit_selected_item_arr = {...state};
set_edit_selected_item_arr = set_edit_selected_item_arr.items.map(item => {
if (item.id === action.editInfo.id ) {
item.color = action.editInfo.color;
item.size = action.editInfo.size;
item.quantity = action.editInfo.quantity;
return item;
} else {
return item;
}
});
return {
...state,
items: set_edit_selected_item_arr
};
default:
return state;
}
}
my Items Component
import Item from '../../components/Item';
import './Items.css';
class Items extends Component {
render() {
return (
<table className="Items">
<thead>
<tr className="Items__header">
<th className="item_col">{this.props.items.length} ITEMS</th>
<th className="size_col">SIZE</th>
<th className="qty_col">QTY</th>
<th className="price_col">PRICE</th>
</tr>
</thead>
<tbody>
{this.props.items.map(item => {
return (<Item item={item} key={item.name} />);
})}
</tbody>
</table>
)
}
}
const mapStateToProps = (state) => {
return {
items: state.itemRedux.items
}
}
export default connect(mapStateToProps)(Items);
my ItemEditModal component
import './ItemEditModal.css';
class ItemEditModal extends Component {
state = {
id: this.props.itemRedux.selectedItem.id,
size: this.props.itemRedux.selectedItem.size,
color: this.props.itemRedux.selectedItem.color,
quantity: this.props.itemRedux.selectedItem.quantity,
}
onUnselectItemFunc = () => {
this.props.onSetSelectedItem(null);
this.props.onSetEditItemMode(false);
}
onQuantityChange = (e) => {
//validation required
this.setState({quantity: e.target.value})
}
onSelectChange = (e) => {
this.setState({size: e.target.value})
}
onColorChange = (newColor) => {
this.setState({color: newColor})
}
onSubmitForm = (e) => {
e.preventDefault();
this.props.onSetEditSelectedItem(this.state);
this.props.onSetEditItemMode(false);
}
render() {
return (
<div className={"ItemEdit " + (this.props.itemRedux.editItemMode ? 'showModal': '')}>
<div className="ItemEdit__close">
<span onClick={this.onUnselectItemFunc}>x</span>
</div>
<div className="ItemEdit__container">
<div className="ItemEdit__info">
<h4>{this.props.itemRedux.selectedItem.name}</h4>
<h2>$ {this.props.itemRedux.selectedItem.price}</h2>
<p className="ItemEdit__styleNum">{this.props.itemRedux.selectedItem.styleNum}</p>
<p className="ItemEdit__control-color">
<span
className="ItemEdit__control-color--red"
onClick={()=> {this.onColorChange('red')}}>
</span>
<span
className="ItemEdit__control-color--green"
onClick={()=> {this.onColorChange('green')}}>
</span>
<span
className="ItemEdit__control-color--blue"
onClick={()=> {this.onColorChange('blue')}}>
</span>
</p>
<p>Color: {this.state.color}</p>
<form onSubmit={this.onSubmitForm}>
<select onChange={this.onSelectChange}>
<option value="S">small</option>
<option value="M">medium</option>
<option value="L">large</option>
</select>
<input
type="number"
maxLength="2"
defaultValue={this.props.itemRedux.selectedItem.quantity}
onChange={this.onQuantityChange}
/><br/>
<button className="btn btn-primary">EDIT</button>
</form>
Check product details
</div>
<div className="ItemEdit__img">
<img src={this.props.itemRedux.selectedItem.imgUrl} alt="shirt pic" />
</div>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
itemRedux: state.itemRedux
}
}
const mapDispatchToProps = (dispatch) => {
return {
onSetSelectedItem: (bool) => dispatch(actions.setSelectedItem(bool)),
onSetEditItemMode: (bool) => dispatch(actions.setEditItemMode(bool)),
onSetEditSelectedItem: (itemInfo) => dispatch(actions.setEditSelectedItem(itemInfo))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ItemEditModal);
Maybe i'm not seeing something. thanks in advance.

Answer 1

Nothing happens when I dispatch an action
Sometimes, you are trying to dispatch an action, but your view does not update. Why does this happen? There may be several reasons for this.
Never mutate reducer arguments
It is tempting to modify the state or action passed to you by Redux. Don't do this!
Redux assumes that you never mutate the objects it gives to you in the reducer. Every single time, you must return the new state object. Even if you don't use a library like Immutable, you need to completely avoid mutation
Source: https://redux.js.org/troubleshooting#nothing-happens-when-i-dispatch-an-action