dynamic map of stores

[mendrik]

Is there a way I could have a store of stores? My use case is as follows I have dynamically loaded tags (string[]) and I have a list of values, where each value belongs to one tag. Now would like to have a derived store where I can fetch values by tag to use in useList.

in simple terms I would like to have a dictionary of stores -> { [tag]: Store<Value[]>} so that I could use it then in useList($valueStore[tag], () => ...)

How can I model maps of dynamic stores?

[zerobias]

Rxjs-style dynamic entities tend to create more problems than they solve as they permeate the business logic which we want to keep dry and clean; it is better to make an additional store with combine and apply useList to it

const $tagValues = createStore({tagA: [], tagB: []})
const $currentTag = createStore('tagB')
const $selectedValues = combine($tagValues, $currentTag, (dict, tag) => dict[tag])

const View = () => useList($selectedValues, value => <>…</>)

Or if you need to render many tags at once, you could switch to useStoreMap and plain array map in view component:

const $tagValues = createStore({tagA: [], tagB: []})

const TagView = ({tag}) => {
  const values = useStoreMap({
    store: $tagValues,
    keys: [tag],
    fn: (dict) => dict[tag],
  })
  return values.map(value => <>…</>)
}

[mendrik]

const $tagValues = createStore({tagA: [], tagB: []}) <- but how do I go about this when tags are loaded from an API and are therefore dynamic?