Redux subscribe未在仅监听不派发动作的组件中触发如何解决？

问题原因 #

核心错误是你在两个组件中分别创建了独立的Redux Store实例
Redux默认是单Store架构，所有状态都存在同一个全局Store实例中，你在MembersBar和ThemeSwitch组件中都单独执行了const store = createStore(RootReducer)，相当于生成了两个完全隔离、状态不共享的Store：

• 开关组件触发dispatch修改的是自己创建的Store，只会触发自身的subscribe回调
• 按钮组件订阅的是自己创建的另一个Store，从来没有收到过dispatch动作，自然不会触发回调

修复方案 #

步骤1：抽离全局唯一的Store实例 #

新建单独的Store文件统一导出实例，避免重复创建：

// src/scripts/Redux/store.ts
import { createStore } from "redux";
import { RootReducer } from "./CommonReducer";

export const store = createStore(RootReducer);

步骤2：修改两个组件的Store导入逻辑 #

删除两个组件内部的createStore代码，统一导入上面的全局Store：

// MembersBar组件修改导入
import { store } from "src/scripts/Redux/store";
// 删掉原来的 const store = createStore(RootReducer) 代码

// ThemeSwitch组件修改导入
import { store } from "src/scripts/Redux/store";
// 删掉原来的 const store = createStore(RootReducer) 代码

可选优化：避免内存泄漏 #

store.subscribe会返回一个取消订阅的函数，你可以在组件销毁时调用该函数，清除无用的订阅回调，避免内存泄漏：

// 示例：存储取消订阅函数
private unsubscribe: () => void;

manageButtonStyle(button: HTMLButtonElement, id: string) {
  this.unsubscribe = store.subscribe(() => {
    console.log("something changed!");
    const newTheme: string = store.getState().theme;
    changeButtonsStyle(newTheme, button, id);
  });
}

// 组件销毁时调用
destroy() {
  this.unsubscribe?.();
}

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