Javascript 当redux中只有单个状态发生更改时，如何防止其他组件重新呈现

我使用redux作为状态管理创建了一个react项目。我有两种不同的状态存储在同一个减速器中，由两个不同的组件使用。但每次我更改一个组件中的状态时，另一个组件也会重新渲染。如何防止这种渲染行为

您可以在这里尝试我的沙盒：

---

我在每个组件中放置了一些

console.log

，当单击按钮时，这两个组件都会呈现出来，因为这两个组件都连接到整个状态。因此，如果只更新状态的一小部分，则会导致它们都重新加载。您可以使用分派挂钩和选择器仅连接到商店的相关部分。下面是一个沙箱示例：

---

您正在将整个州映射到道具。映射每个组件所需的子集。如果这些子集不重叠，那么当该子集不变时，它们就不应该重新渲染。这很有效！因此，没有必要从redux使用connect（）？您可以使用

connect

或hook。因为现在每个人都在使用钩子，所以我推荐这种方法。如果您希望连接，您仍然可以得到相同的结果，但是您只需要映射您的

mapstatetops