组件未更新React / Redux

Question

我在我的应用程序上使用Redux。我有一个Items组件连接到redux。它将道具传递给各个Item组件。我还有一个ItemEditModal组件，用于编辑单个组件。我面临的问题是，当我通过ItemEditModal编辑项目时，即使Redux确实发生了变化，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

当我分派动作时什么也没发生

有时，您正在尝试调度操作，但是视图不会更新。为什么会这样？可能有几个原因。

切勿更改reducer参数

很容易修改Redux传递给您的状态或操作。不要这样做！

Redux假定您永远不会在化简器中对它提供给您的对象进行突变。每一次，您都必须返回新的状态对象。即使您不使用像Immutable这样的库，也需要完全避免突变

来源：https://redux.js.org/troubleshooting#nothing-happens-when-i-dispatch-an-action