Компонент не обновляет React / Redux

Question

Я использую Redux в своем приложении. У меня есть компонент Предметы, подключенный к редуксу. Он передает реквизиты отдельным компонентам Item. У меня также есть компонент ItemEditModal, который редактирует отдельный компонент. Проблема, с которой я сталкиваюсь, заключается в том, что, когда я редактирую Item через ItemEditModal, компонент Items не обновляет событие, даже если изменится редукс. Вот соответствующие части моего кода:

мой файл редуктора .. это действие, на котором нужно сосредоточиться: 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; 
    }

}

Компоненты моих товаров

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);

мой компонент ItemEditModal

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>
                        <a href="#">Check product details</a>
                    </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);

Может быть, я чего-то не вижу. заранее спасибо.

Answer 1

Ничего не происходит, когда я отправляю действие

Иногда вы пытаетесь отправить действие, но ваше представление не обновляется. Почему это происходит? Для этого может быть несколько причин.

Никогда не мутировать аргументы редуктора

Соблазнительно изменить состояние или действие, переданное вам Redux. Не делай этого!

Redux предполагает, что вы никогда не мутируете объекты, которые он вам дает в редукторе. Каждый раз вы должны возвращать новый объект состояния. Даже если вы не используете библиотеку, такую ​​как Immutable, вам нужно полностью избежать мутации

Источник: https://redux.js.org/troubleshooting#nothing-happens-when-i-dispatch-an-action