使用状态池反应渲染

Question

标准JS文件：

// functions.js

import cockpit from "cockpit";
import { store } from "state-pool";

const global_status = {
    key1: null,
    key2: null,
}

store.setState("status", global_status);

function update_config(data, message) {
    const json_data = JSON.parse(data);
    store.setState("status", {
        key1: json_data.key1,
        key2: json_data.key2,
    };)
}

export function get_config() {
    cockpit.spawn(python_script, superuser: "try", err: "message" })
            .done(function (data, message) { update_config(data, message) })
            .fail(function (error) { console.log(["spawn() failed: ", error]) });
}

// Initial loading of values
get_config()

在我的 JSX 文件中，我有这个：

// app.jsx

import React, { useEffect } from 'react';
import { Alert, Card, CardTitle, CardBody } from '@patternfly/react-core';
import { store, useGlobalState } from 'state-pool';

function ShowStatus () {
    const stat = store.getState("status");
    const info = stat.key1 ? "info" : !stat.key1 ? stat.installed ? "error" : "warning";
    const status = stat.key2 ? "Enabled" : !stat.key2 ? "Available" : "Unkown";
    return (
        <Alert variant={info} title={status} />
    );
}

export function App () {
    const [status] = useGlobalState('status');
    useEffect(
        () => ShowStatus, [status]
    );
    return (
        <Card>
            <CardTitle>Status</CardTitle>
            <CardBody>
                <ShowStatus />
            </CardBody>
        </Card>
    );
}

在 Fedora Cockpit 中渲染它时，它可以工作，但只有初始加载值（key1：null，key2：null）显示。调用 get_config() 后，状态页永远不会更新。

我使用了 console.log() 并验证了在调用 get_config() 后“状态”得到了更新，但页面没有使用更新的数据呈现。

CAVEAT：我已经有一段时间没有用 JS 编写代码了，这是我第一次使用 React。

我已经阅读了 React 文档以及来自 stackoverflow 的大约 30 个关于此问题的答案，但我仍然在绕过一些 Reactisms 时遇到了一些问题。

任何帮助将不胜感激。

更新：

我尝试过的一种变体：

// app.jsx

function ShowStatus (stat) {
    const info = stat.key1 ? "info" : !stat.key1 ? stat.installed ? 
     ...
}

export function App () {
...
            <CardBody>
                <ShowStatus stat={status} />
            </CardBody>
...

将 get_config() 放在一个单独的文件中的原因是由于几个不同的页面最终可能会尝试更新配置设置。

Answer 1

我有类似的问题...尝试重新创建您在这里所做的事情，我相信您必须“订阅”您想要更新渲染功能的键。

来自 github 自述文件：

    store.subscribe & globalState.subscribe
    
    If you want to listen to changes in a store you can subscribe to it by using   
    store.subscribe. it accepts an observer function. For example
    
    // Subscribe to store changes
    const unsubscribe = store.subscribe(function(key: String, value: Any){
        // key is the key for a global state that has changed 
        // value is the new value of a global state
    })
    
    // You can unsubscribe by calling the result
    unsubscribe();

在测试文件中是这样完成的：

import React from 'react';
import { renderHook, act } from '@testing-library/react-hooks';
import { createStore } from '../src/';


const store = createStore();
store.setState("count", 0);

let testVal1 = 0;
let testVal2 = 0;

test('should update testVal1 & testVal2 through subscribers', () => {
    const { result } = renderHook(() => store.useState("count"))

    act(() => {
        store.subscribe((key, value) => {
            testVal1 = 1
        })
        store.getState("count").subscribe((value) => {
            testVal2 = 2
        })
        result.current[2](count => 1)
    })

    expect(testVal1).toStrictEqual(1);
    expect(testVal2).toStrictEqual(2);
})