Is there no way to iterate over a map of atoms and get the values?

[SeanCesario]

Hello, I am working on a project in React TS and using Jotai and Jotai-Form for state management.

We have a large form that we are managing and in one section there dynamically rendered components that users can add or remove, in those components are form fields using atoms. I want to create a map atom that holds the form atoms (they are atomWithFormControl atoms from jotai-forms).

I need to be able to iterate over the map and access the values to display the correct type of component per value. Add new values with custom parameters such as name and type along with the key for the map. And get the values based on the key.

The problems I have been running into are, I can't figure out a way to iterate over a map of atoms and get the values as an array.

Atom families were not helpful because I can't iterate over them and defining custom setters was messy bcs I needed to add extra props when initializing.

Then I was defining a custom map class as an atom, but I couldn't iterate over those values either because of the hook issue.

Is there no way to iterate over a map of atoms and get the values as an array of values? Keep in mind the atoms I am using are atomWithFormControls from the jotai-form library, and they will be updating frequently and separately after being added to the map.

I would really appreciate any help on this

[dmaskasky]

1. You can iterate over atomFamilies with family.getParams

const fooFamily = atomFamily((param) => {
  // family logic
})
const fooFamilyParams = fooFamily.getParams()
const fooFamilyAtoms = Array.from(fooFamilyParams).map(fooFamily)

2. You can create a custom store with unstable_derive to store a list of "all atoms".
   ⚠️ Be advised this api will change in the near future, and may be replaced entirely.

const allAtomsSet = new Set()
const customStore = createStore().unstable_derive((...storeArgs) => {
  const getAtomState = storeArgs[0]
  storeArgs[0] = (a) => {
    allAtomsSet.add(a)
    return getAtomState(a)
  }
  return storeArgs
})

function JotaiCustomProvider() {
  return <Provider store={allAtomsSet}>{children}</Provider>
}

[SeanCesario]

@dmaskasky
Thanks, I'll go with atomFamily, cleanest solution I think, just little restricting maybe.

What we be the best practice way to customize the initializer with additional parameters, that are used from creating the values, for an atom family?

Also is there a way to initialize an empty atomFamily?

[dmaskasky]

Is this what you are asking?

function makeFooFamily() {
  const fooFamilyRef = atomFamily((param) => {
    // family logic
  })
  function allAtoms() {
    return Array.from(fooFamilyRef.getParams(), fooFamilyRef)
  }
  function initialize() {
    Array.from(fooFamily.getParams(), fooFamilyRef.remove)
  }
  Object.assign(fooFamily, { initialize, allAtoms }
  function customInitializer() {
    // custom initializer logic
  }
  return function fooFamily(value) {
    const customValue = custom(value)
    return fooFamilyRef(customValue)
  }
}
const fooFamily = makeFooFamily()

[SeanCesario]

This is helpful thank you!!

I was more asking though, if I hand an atom family of atom objects where each objects keys are the same. When I create a new value in the family I want to be able to pass in two values to initialize two of the fields in the object.

[dmaskasky]

const fooFamily = makeFooFamily()

type CustomFooFamily = {
  (...args: unknown[]): unknown
  allAtoms: () => Array<Atom<unknown>>
  initialize: () => void
}

function makeFooFamily(): CustomFooFamily {
  const fooFamilyRef = atomFamily(([value 1, value 2]) => {
    // family logic
  })
  function allAtoms() {
    return Array.from(fooFamilyRef.getParams(), fooFamilyRef)
  }
  function initialize() {
    Array.from(fooFamily.getParams(), fooFamilyRef.remove)
  }
  Object.assign(fooFamily, { initialize, allAtoms }
  function customInitializer() {
    // custom initializer logic
  }
  const memoizedFooFamily = memoize(fooFamily)
  return function fooFamily(...values) {
    const customValue = custom(value)
    return memoizedFooFamily(values)
  }
}

function memoize<T>(fn: T): T {
  const keyMap = Map<string, Intl.NumberFormatOptions>()
  return function getValue(key) {
    const keyString = stableStringify(key)
    if (!keyMap.has(keyString) {
      keyMap.set(keyString, fn(key))
    }
    return keyMap.get(keyString)
  }
}

function stableStringify(obj: unknown): string {
  if (Array.isArray(obj)) {
    return JSON.stringify(obj.map(stableStringify))
  }
  if (typeof obj === 'object' && obj !== null) {
    const sortedKeys = Object.keys(obj).sort()
    const sortedObj: Record<string, string> = {}
    for (const key of sortedKeys) {
      sortedObj[key] = stableStringify(obj[key])
    }
    return JSON.stringify(sortedObj)
  }
  return JSON.stringify(obj)
}