How do you share state between panels in React app?

Photoshop
, , ,
1

Question is pretty simple as the topic title says. I can’t figure out how to share state store between panels so that if I click something on one panel, something would change on the other.

What I have now, is:

// index.tsx

    entrypoints.setup({
        commands: {showAbout},
        panels: {
            panel1: PanelController(<App currentPanel="panel1"/>, flyOuts['panel1Flyout']),
            panel2: PanelController(<App currentPanel="panel2"/>, flyOuts['panel2Flyout']),
            panel3: PanelController(<App currentPanel="panel3"/>, flyOuts['panel3Flyout'])
        }
    })

And then

// App.tsx

export default ({currentPanel}: {currentPanel: string}) => {
    const store = createStore(getStoreState(currentPanel))

    return (
        <StoreProvider store={store}>
            <Panel/>
        </StoreProvider>
    )
}

So each panel has its own store. How do I share a single store among all three?

2

Like this:

1 Like
3

I think I see what’s happening here on the surface, but I’ll have to dig deeper some day after I’m done with the single panel :slightly_smiling_face: As I’m on my first ever React project now, I don’t even understand what some parts of the code even mean :sweat_smile: Also I chose to use easy-peasy for my state management, so I’ll have to figure that one out either :laughing: Thank you though for your input, really appreciate :slight_smile:

4

So didn’t even need to create HTML or anything like that. Just created a store before entrypoints.setup() and passed that store to each <App />. That’s it :slight_smile: Thank you for your example - it helped me realize how simple some things might be :slight_smile:

// index.tsx
    const store = createStore(getStoreState())

    entrypoints.setup({
        commands: {showAbout},
        panels: {
            panel1: PanelController(<App currentPanel="panel1" store={store}/>, flyOuts['panel1Flyout']),
            panel2: PanelController(<App currentPanel="panel2" store={store}/>, flyOuts['panel2Flyout']),
            panel3: PanelController(<App currentPanel="panel3" store={store}/>, flyOuts['panel3Flyout'])
        }
    })

// App.tsx

export default ({currentPanel, store}: {currentPanel: string, store: Store}) => {
    return (
        <StoreProvider store={store}>
            <Panel panelId={currentPanel}/>
        </StoreProvider>
    )
}
1 Like