如何使用 Redux 存储值更新 Chakra UI theme.js 文件？

Question

我想做什么？

我想用可以从前端更改的 redux 存储值更改 Chakra UI 全局 theme.js 文件。 就像从前端一个按钮将所有 H1 标签 colors 更改为品牌 colors。

主题.js 文件

import { extendTheme } from "@chakra-ui/react";
import { store } from "./redux/store";
const getBgColor = (state) => {
  return state.theme.bgColor;
};
let test = "red";

const Helper = () => {
  const state = store.getState();
  const color = getBgColor(state);
  console.log("color", color);
  test = color;
  console.log(test);
};
store.subscribe(Helper);
console.log("test", test);

export const theme = extendTheme({
  colors: {
    brand: {
      100: `${test}`
    }
  }
});

目前，这是第一次从 redux 商店获取价值，但不会随着商店价值的变化而改变。 在 Helper function 内部，它正在监听变化，但 theme.js 文件没有得到更新。

你可以检查我正在测试的这个代码沙箱......

CodeSandBox 链接： https://codesandbox.io/s/upbeat-khayyam-rietmr?file=/src/theme.js

提前致谢！