Handling state duplication and sibling-sibling component communication

[seanbanko]

I'm working on a Bubble Tea app that fetches data from an external API using a tea.Cmd and I'm having trouble figuring out the best way of storing that data in my model. I want to display the data in a list Bubble in one part of the application so the user can interact with it, but the data also needs to be accessible (view-only) from another page of the app. I've tried two things:

In one version I store the data directly in my top-level model and also update the list component whenever a newItemsMsg arrives. When I need to show the other page, I pass the data as an argument to its constructor.

type newItemsMsg struct { items []MyItem }

type ModelA struct {
    items         []MyItem
    itemsList     list.Model
    someOtherPage tea.Model
}

func (m ModelA) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    var cmd tea.Cmd
	switch msg := msg.(type) {
	case newItemsMsg:
        m.items = msg.items
        m.itemsListPage, cmd = m.itemsListPage.Update(msg)
		// or just directly call m.itemsListPage.SetItems(msg.items)
		return m, cmd
    case showOtherPageMsg:
        m.someOtherPage = newSomeOtherPage(m.items)
        // change focused page to someOtherPage
        return m, nil
    }
    return m, nil
}

Alternatively, I tried removing the items from the top-level model entirely and just using the itemsList direclty to store the items.

type newItemsMsg struct { items []MyItem }

type ModelB struct {
    itemsList     list.Model
    someOtherPage tea.Model
}

func (m ModelB) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
    var cmd tea.Cmd
	switch msg := msg.(type) {
	case newItemsMsg:
        m.itemsListPage, cmd = m.itemsListPage.Update(msg)
		// or just directly call m.itemsListPage.SetItems(msg.items)
		return m, cmd
    case showOtherPageMsg:
        m.someOtherPage = newSomeOtherPage(m.itemsListPage.Items())
        // change focused page to someOtherPage
        return m, nil
    }
    return m, nil
}

Both of these feel a bit awkward to me.

With ModelA, I feel like I'm duplicating state and don't have a single source of truth for the items. Every time I receive a newItemsMsg I have to make sure to pass that message to (or directly update) every submodel that needs it or else different parts of my app could become out-of-sync.

With ModelB, I now have a clear single source of truth for the items currently in the model, but it's awkward to pass the list of items to sibling components that need it because I need to call getter methods to get data from the list.Model. With just one level of nesting this actually isn't so bad, but suppose my list.Model is embedded inside of another tea.Model component, like this:

type ModelC struct {
    itemsListPage tea.Model
    otherPage     tea.Model
}

type ItemsListPage struct {
    itemsList     list.Model
}

Now I need to write wrapper methods inside ItemsListPage to expose whatever I need from the itemsList (e.g. Items(), SetItems(), SelectedItem(), etc.).

Is there a recommended way of sharing state between components in TEA without either duplicating state and risking data becoming out of sync between different components or needing to access the state of submodels through wrappers?