组件未更新 React/Redux

Question

我在我的应用程序上使用 Redux。我有一个连接到 redux 的 Items 组件。它将道具传递给各个 Item 组件。我还有一个 ItemEditModal 组件来编辑各个组件。我面临的问题是，当我通过 ItemEditModal 编辑 Item 时，即使 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 假定您永远不会改变它在 reducer 中提供给您的对象。每次，您都必须返回新的状态对象。即使不使用 Immutable 之类的库，也需要完全避免突变

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