如何重置Redux中特定ID的BannerContent状态？

问题现象 #

定义了包含Banner内容的Redux初始状态与slice，其中updateBannerContent方法可正常更新指定ID的状态，但resetBannerContent方法无法将ID为'1'的项重置为初始状态，点击重置按钮后对应对象无任何变化。

错误原因分析 #

1. resetBannerContent reducer逻辑错误 #

• 错误用字符串ID作为数组索引：initialBannerContentState[id]中，id是字符串'1'，但数组initialBannerContentState的索引是数字0和1，该语句会返回undefined，根本没获取到ID为'1'的初始配置项。
• 即使拿到初始项，也仅引用值未赋值给existing对象，相当于没对状态做任何修改。

2. 组件onClick事件绑定错误 #

当前代码直接在onClick中执行dispatch，而非绑定函数：

<Button onClick={
    dispatch(BannerContentActions.resetBannerContent({ id: '1', item: 'bg' }));
}>

这种写法会导致组件渲染时自动执行dispatch，点击按钮时已无逻辑可触发。

3. updateBannerContent的payload参数错误 #

第二个updateBannerContent的dispatch中，payload的key写错：

dispatch(BannerContentActions.updateBannerContent({
    id: '1',
    item: 'isSet',
    url: true // 错误：应传value而非url
}));

reducer中解构的是value，传url会导致value为undefined，无法正确更新isSet属性。

修复方案 #

修复resetBannerContent reducer #

修改逻辑，正确获取初始项并覆盖现有状态：

resetBannerContent(state, action) {
    const { id } = action.payload;
    const existingIndex = state.findIndex(item => item.id === id);
    const initialItem = initialBannerContentState.find(item => item.id === id);
    if (existingIndex !== -1 && initialItem) {
        // 直接替换数组中对应项，或逐个赋值属性保留自定义配置
        state[existingIndex] = { ...initialItem };
    }
}

修复组件onClick事件 #

将dispatch包裹在箭头函数中，确保点击时才执行：

<Button onClick={() => {
    dispatch(BannerContentActions.updateBannerContent({
        id: '1',
        item: 'url',
        value: 'someimageurl'
    }));
    dispatch(BannerContentActions.updateBannerContent({
        id: '1',
        item: 'isSet',
        value: true // 修正key为value
    }));
}}>
    设置图片链接
</Button>
<Button onClick={() => {
    dispatch(BannerContentActions.resetBannerContent({ id: '1' }));
}}>
    重置ID为1的初始数据
</Button>

优化updateBannerContent reducer（可选） #

简化switch逻辑，直接通过属性名赋值减少冗余：

updateBannerContent(state, action) {
    const { id, item, value } = action.payload;
    const existing = state.find(item => item.id === id);
    if (existing && Object.prototype.hasOwnProperty.call(existing, item)) {
        existing[item] = value;
    }
}

内容的提问来源于stack exchange，提问作者udarts