React使用state-pool更新全局状态后Fedora Cockpit页面不重渲染求助

1. 优先排查状态更新是否符合不可变原则 #

这是最常见的触发更新失败原因，state-pool和React原生状态一致，依赖状态引用变化判断是否需要触发重渲染。如果直接修改原状态对象的属性再提交，state-pool会认为状态没有变化，不会通知订阅组件更新。

错误写法示例 #

// functions.js 中更新状态的错误逻辑
import { store } from 'state-pool';

// 初始化逻辑
store.create("status", {key1: null, key2: null});

export const get_config = async () => {
  const res = await cockpit.spawn(["python3", "/path/to/your/script.py"]);
  const config = JSON.parse(res);
  // 错误：直接修改原状态对象，引用地址未变化
  const oldStatus = store.get("status");
  oldStatus.key1 = config.key1;
  oldStatus.key2 = config.key2;
  store.set("status", oldStatus);
}

正确写法示例 #

更新时必须返回全新的对象，修改引用地址：

export const get_config = async () => {
  const res = await cockpit.spawn(["python3", "/path/to/your/script.py"]);
  const config = JSON.parse(res);
  // 正确：使用函数式更新，基于旧状态返回全新对象
  store.set("status", prevStatus => ({
    ...prevStatus,
    key1: config.key1,
    key2: config.key2
  }));
}

2. 排查store实例是否唯一 #

确认全局仅初始化了一次store，没有在多个文件中重复创建store实例。不同store实例的状态是完全隔离的，若在functions.js中更新A实例的状态，组件订阅的是B实例的状态，自然收不到更新通知。
正确做法是全局仅在一个公共文件（比如你用到的functions.js）中初始化状态，其他所有文件都从这个公共文件导入store或者直接使用useGlobalState订阅对应key即可。

3. 排查useGlobalState调用是否正确 #

确认App组件中useGlobalState的参数和初始化状态时的key完全一致，拼写、大小写、引号都要对应：

// app.jsx 中正确的订阅写法
import { useGlobalState } from 'state-pool';
import ShowStatus from './ShowStatus';

function App() {
  // 注意这里的key "status" 必须和初始化时的key完全一致
  const [status] = useGlobalState("status");
  return <ShowStatus status={status} />;
}

4. 排查组件渲染阻断逻辑 #

如果上述步骤都没问题，检查App组件或者ShowStatus组件是否使用了React.memo、shouldComponentUpdate这类性能优化逻辑，错误的依赖配置或者比较逻辑会阻断组件重渲染。如果用了React.memo包裹ShowStatus，可以先暂时去掉memo验证是否是这个原因。

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