在Redux中调度切换而不将其保存在State中

Question

我现在是如何做到的

我有一张物品清单。现在，当用户按下按钮X时，shouldShowItem被切换。CCD_ 2最终位于redux中并且作为道具向下传递到CCD_ 3中。它是CCD_ 4或CCD_。当它改变时，toggleDisplay被调用并改变我的钩子中的状态：

useEffect(() => {
toggleDisplay(!display); //this is just a useState hook call
}, [shouldShowItem]); //PS: I'm aware that I don't need this extra step here, but my actual code is a bit more complicated, so I just simplified it here.

我的问题是，我在redux中有一个单独的shouldShowItem属性，而不是每个项都有一个shouldShowItem。我不想将此属性移动到每个项目的redux状态。

问题：

然而，我的构造的问题是shouldShowItem正在保存，这意味着如果我在时间X为项Y切换它，然后我的项目Z也由于不相关的事件而重新渲染，它将使用更新的shouldShowItem状态重新渲染，尽管该状态更改是为

项X本质上，我是在redux中保存shouldShowItem的状态，而我只需要一个切换，我可以调度一次，它对当前项有效，然后不再被读取/需要。我想基本上调度一个切换，-我不在乎redux中每个项目的状态，我只在乎它切换一次。

建议？

编辑：更多代码

项目：

const Item = ({shouldShowItem, itemText, updateCurrentItem})=>
{
const [display, toggleDisplay] = useState(false);
useEffect(() => {
if (isSelected) {
toggleDisplay(!display);
}
}, [shouldShowItem]);
return (
<div
onClick={() => {
toggleDisplay(!display);
updateCurrentItem(item._id);
}}
>
{display && <span>{itemText}</span>}
</div>
);
}

通过项目列表进行映射：

allItems.map((item, i) => {
return (
<Item
key={i}
shouldShowItem={this.props.shouldShowItem}
itemText={item.text}
updateCurrentItem={this.props.updateCurrentItem}
);
});

这里的道具来自redux，所以shouldShowItem是一个位于redux中的布尔值，而updateCurrentItem是一个动作创建者。好吧，在redux中，我只是简单地切换shouldShowItem真&无论何时调度切换操作，都为false。(设置和取消设置shouldShowItem的真/假的切换操作在其他组件中，工作正常(

Answer 1

与其使用布尔shouldShowItem，不如将其转换为具有布尔值的id对象：

const [showItem, setShowItem] = useState({id_1: false, id_2: false})
const toggleDisplay = id => {
setShowItem({...showItem, [id]: !showItem[id]})
updateCurrentItem(id)
}
allItems.map((item, i) => {
return (
<Item
key={i}
shouldShowItem={showItem[item._id]}
itemText={item.text}
updateCurrentItem={toggleDisplay}
);
});

const Item = ({shouldShowItem, itemText, updateCurrentItem}) => {
return (
<div
onClick={() => toggleDisplay(item._id)}
>
{shouldShowItem && <span>{itemText}</span>}
</div>
)
}