Dynamically set values of an atomFamily

There is probably a different/better ways to achieve this but I wanted to model a selection dialogue using atomFamily booleans:

const selectedLanguages = atomFamily<string, boolean>(() => false)

Now, the selected languages are returned from an API which I want to keep consistent.

I’m imagine an atom that lets me pass in the id dynamically. So instead of having just a value, get something that exposes the method that looks up the value via id.

const Component = () => {
  allLanguages = ["de", "fr", "en"]
  [_selectedLanguages, setSelectedLanguages] = useAtomFamily(selectedLanguagesState) <= doesn't exist

  useEffect(() => {
    const selectedLanguagesFromApi = fetchLanguages()

    allLanguages.forEach((lang) => {
      if(selectedLanguagesFromApi.include(lang)) {
        setSelectedLanguages(lang, true)
      }
    })

  }, [])


  return(<Something />)
}

Am I thinking about this wrong?

[dai-shi]

You need to track the params to use the family on your end.

const selectedLanguages = atomFamily<string, boolean>(() => false)

const availableLanguages = atom<string[]>([])

const selectedLanguagesState = atom(
  (get) => get(availableLanguages).filter((lang) => get(selectedLanguages(lang))),
  (get, set, { lang, value }) => {
    if (!get(availableLanguages).includes(lang)) {
      set(availableLanguages, [...get(availableLanguages), lang])
    }
    set(selectedLanguages(lang), value)
  }
)

const Component = () => {
  allLanguages = ["de", "fr", "en"]
  [_selectedLanguages, setSelectedLanguages] = useAtom(selectedLanguagesState)

  useEffect(() => {
    const selectedLanguagesFromApi = fetchLanguages()

    allLanguages.forEach((lang) => {
      if(selectedLanguagesFromApi.include(lang)) {
        setSelectedLanguages({ lang, value: true })
      }
    })

  }, [])


  return(<Something />)
}

It might be possible to consider adding selectedLanguages.params() feature. But, it’s not reactive, so I don’t think it’s useful in this use case.

[dai-shi]

Also, if this would be better in a new issue, please move it / let me know.

Yes, please open a new discussion.