javascript - adobe photoshop UXP插件中的全局状态，如redux

Question

在默认的 adobe UXP 插件中，我知道入口点是

    entrypoints.setup({
        plugin: {
            create(plugin) {},
            destroy() {}
        },
        commands: {
            showAbout: aboutController
        },
        panels: {
            demos: demosController,
            moreDemos: moreDemosController
        }
    });

面板和控制器定义为

const aboutController = new CommandController(({ dialog }) => <About dialog={dialog}/>, { id: "showAbout", title: "React Starter Plugin Demo", size: { width: 480, height: 480 } });
const demosController =  new PanelController(() => <Demos/>, { id: "demos", menuItems: [
    { id: "reload1", label: "Reload Plugin", enabled: true, checked: false, oninvoke: () => location.reload() },
    { id: "dialog1", label: "About this Plugin", enabled: true, checked: false, oninvoke: () => aboutController.run() },
] });
const moreDemosController =  new PanelController(() => <MoreDemos/>, { id: "moreDemos", menuItems: [
    { id: "reload2", label: "Reload Plugin", enabled: true, checked: false, oninvoke: () => location.reload() }
] });

我的问题是：

• 我通常使用像 Redux 这样的全局状态，并且希望在这里也能够在面板组件之间共享数据。
• 我不能在这里使用localstorage，例如一个共享的东西是socketio connexion。

有没有人有这种需求的经验？

我尝试了以下 data.js

import React from "react";
import produce from "immer";

export class Data {
    constructor() { 
        this.actions = {
            foo:()=>{
                this.state = produce(this.state, draft => {
                    draft.coucou++;
                });
            }    
        }
        this.state={
            coucou:0
        }
    }   
}

通过添加数据的道具来改变 index.js

import { Data } from "./actions/data";
var data = new Data();
const aboutController = new CommandController(({ dialog }) => <About data={data}  dialog={dialog}/>, { id: "showAbout", title: "React Starter Plugin Demo", size: { width: 480, height: 480 } });
const demosController =  new PanelController(() => <Demos data={data} />, { id: "demos", menuItems: [
    { id: "reload1", label: "Reload Plugin", enabled: true, checked: false, oninvoke: () => location.reload() },
    { id: "dialog1", label: "About this Plugin", enabled: true, checked: false, oninvoke: () => aboutController.run() },
] });
const moreDemosController =  new PanelController(() => <MoreDemos  data={data}/>, { id: "moreDemos", menuItems: [
    { id: "reload2", label: "Reload Plugin", enabled: true, checked: false, oninvoke: () => location.reload() }
] });

panelControler 创建了面板，但即使我尝试将它们作为道具提供一个不断变化的状态对象，它们也只会呈现一次，例如： 

import { Data } from "./actions/data";
var data = new Data();
const aboutController = new CommandController(({ dialog }) => <About state={data.state} actions={data.actions} dialog={dialog}/>, { id: "showAbout", title: "React Starter Plugin Demo", size: { width: 480, height: 480 } });
const demosController =  new PanelController(() => <Demos state={data.state} actions={data.actions} />, { id: "demos", menuItems: [
    { id: "reload1", label: "Reload Plugin", enabled: true, checked: false, oninvoke: () => location.reload() },
    { id: "dialog1", label: "About this Plugin", enabled: true, checked: false, oninvoke: () => aboutController.run() },
] });
const moreDemosController =  new PanelController(() => <MoreDemos state={data.state} actions={data.actions}/>, { id: "moreDemos", menuItems: [
    { id: "reload2", label: "Reload Plugin", enabled: true, checked: false, oninvoke: () => location.reload() }
] });

我确实在文档中看到没有重绘组件的功能

干杯

标签： javascriptreactjsreduxpluginsadobe