# How do you share state between panels in React app?

**URL:** <https://forums.creativeclouddeveloper.com/t/how-do-you-share-state-between-panels-in-react-app/3859>\
**Category:** Photoshop\
**Tags:** react, ui, uxp, javascript\
**Created:** [November 7, 2021, 6:20am UTC](https://forums.creativeclouddeveloper.com/t/how-do-you-share-state-between-panels-in-react-app/3859 "2021-11-07T06:20:04Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 7, 2021, 6:20am UTC](https://forums.creativeclouddeveloper.com/t/how-do-you-share-state-between-panels-in-react-app/3859/1 "2021-11-07T06:20:04Z")

</div>

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:

```auto
// 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

```auto
// 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?

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [November 7, 2021, 9:07pm UTC](https://forums.creativeclouddeveloper.com/t/how-do-you-share-state-between-panels-in-react-app/3859/2 "2021-11-07T21:07:23Z")

</div>

Like this:

> <https://github.com/jardicc/alchemist/blob/master/uxp/index.html>

> <https://github.com/jardicc/alchemist/blob/master/src/shared/classes/Main.ts>

> <https://github.com/jardicc/alchemist/blob/master/src/atnDecoder/components/atnDecoderIndex.tsx>

> <https://github.com/jardicc/alchemist/blob/master/src/inspector/components/inspectorIndex.tsx>

> <https://github.com/jardicc/alchemist/blob/master/src/shared/store.tsx>

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 7, 2021, 9:26pm UTC](https://forums.creativeclouddeveloper.com/t/how-do-you-share-state-between-panels-in-react-app/3859/3 "2021-11-07T21:26:40Z")

</div>

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 🙂 As I’m on my first ever React project now, I don’t even understand what some parts of the code even mean 😅 Also I chose to use [easy-peasy](https://easy-peasy.vercel.app/) for my state management, so I’ll have to figure that one out either 😆 Thank you though for your input, really appreciate 🙂

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [November 8, 2021, 11:57pm UTC](https://forums.creativeclouddeveloper.com/t/how-do-you-share-state-between-panels-in-react-app/3859/4 "2021-11-08T23:57:51Z")

</div>

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 🙂 Thank you for your example - it helped me realize how simple some things might be 🙂

```auto
// 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'])
        }
    })

```

```auto
// App.tsx

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

```