Atom with formula or set value at the same time.

[mar9000]

How can be implemented an atom to hold either a value or a calculated value at the same time?

For instance imaging the case of an order line when you have:

• unit price: the price of the product, is always inserted manually.
• discount: can be inserted manually or is calculated from unit price and price.
• price: can be inserted manually or is calculated from unit price and discount.

From the state:

state = {
  unitPrice: 100,
  discount: 0,
  price: 100
}

when I change the discount to 20, price gets calculated:

state = {
  unitPrice: 100,
  discount: 20,
  price: 80
}

the same state is reached if I change price to 80.

The formula for discount is something like discount = (unitPrice-price)/unitPrice*100.
The formula for price is something like price = unitPrice*(1-discount/100).

I implemented it using unitPriceAtom, discountAtom, priceAtom, discountFormulaAtom, priceFormulaAtom and atomEffect. But it results in an infinite loop.
Thx.

[dmaskasky]

function getNextPrice(unitPrice: number, discount: number) {
  return unitPrice * (1 - discount / 100)
}
function getNextDiscount(unitPrice: number, price: number) {
  return ((unitPrice - price) / unitPrice) * 100
}

// reacts to changes to unitPrice
const unitPriceAtom = withAtomEffect(atom(100), (get, set) => {
  const unitPrice = get(unitPriceAtom)
  set(priceAtom, getNextPrice(unitPrice, get.peek(discountAtom)))
  set(discountAtom, getNextDiscount(unitPrice, get.peek(priceAtom)))
})

// reacts to changes to discount
const discountAtom = withAtomEffect(atom(0), (get, set) => {
  const discount = get(discountAtom)
  if (discount === 20 || discount === 80) {
    set(priceAtom, getNextPrice(get.peek(unitPriceAtom), discount))
  }
})

// reacts to changes to price
const priceAtom = withAtomEffect(atom(100), (get, set) => {
  set(discountAtom, getNextDiscount(get.peek(unitPriceAtom), get(priceAtom)))
})

const priceAndDiscount = atom((get) => ({
  unitPrice: get(unitPriceAtom),
  discount: get(discountAtom),
  price: get(priceAtom),
}))

const store = createStore()
store.sub(priceAndDiscount, () => void 0)
await delay(0)
expect(store.get(priceAtom)).toBe(100) // value
expect(store.get(discountAtom)).toBe(0) // (100-100)/100*100 = 0)

store.set(discountAtom, 20)
await delay(0)
expect(store.get(priceAtom)).toBe(80) // 100*(1-20/100) = 80)
expect(store.get(discountAtom)).toBe(20) // value

store.set(priceAtom, 50)
await delay(0)
expect(store.get(priceAtom)).toBe(50) // value
expect(store.get(discountAtom)).toBe(50) // (100-50)/100*100 = 50)

store.set(unitPriceAtom, 200)
await delay(0)
expect(store.get(priceAtom)).toBe(100) // 200*(1-50/100) = 100)
expect(store.get(discountAtom)).toBe(50) // (200-100)/200*100 = 50)

[mar9000]

Thanks for the help.

I ended up with something like the code below. 3 regular atoms, 2 derived atoms for formulas, 2 effect that copy formula to regular atom.

However:

1. semaphorAtom is reported to be always false, see console.log()
2. if the two formulas are not simmetric, let say we add the commented line (a), it result in an infinite loop.

BTW I do not really need this example, what I am doing is just comparing state management libraries.
Nevertheless the use case is a real one: in business application taxes, discounts, totals ecc are most of the time inserted by the user or calculated.

You can close the discussion if you are not interested in adding further details for future reference.

const semaphorAtom = atom(() => ({ value: false }))
const unitPriceAtom = atom(100)
const discountAtom = atom(0)
const priceAtom = atom(100)

// Formula to calculate discount.
const discountFormulaAtom = atom((get) => {
  const unitPrice = get(unitPriceAtom)
  const price = get(priceAtom)
  const discount = unitPrice == 0 ? 0 : (unitPrice - price) / unitPrice * 100;
  return discount
})
// Formula to calculate price.
const priceFormulaAtom = atom((get) => {
  const unitPrice = get(unitPriceAtom)
  const discount = get(discountAtom)
  const price = unitPrice * (1 - discount / 100)
  return price
})

// Copy formula for discount to discount.
const subDisocuntEffect = atomEffect((get, set) => {
  const sem = get(semaphorAtom)
  console.log('discount sem', sem.value)
  if (sem.value) return
  sem.value = true

  let value = get(discountFormulaAtom)
  console.log('discount', value)
  if (value == undefined)
    value = 0
  //value = value + 0.01   // <-- generate infinite loop when added.   (a)
  set(discountAtom, value)

  sem.value = false
})
// Copy formula for price to price.
const subPriceEffect = atomEffect((get, set) => {
  const sem = get(semaphorAtom)
  console.log('price sem', sem.value)
  if (sem.value) return
  sem.value = true

  let value = get(priceFormulaAtom)
  console.log('price', value)
  if (value == undefined)
    value = 0
  set(priceAtom, value)

  sem.value = false
})

function App() {
  const [price, setPrice] = useAtom(unitPriceAtom)
  const [discount, setDiscount] = useAtom(discountAtom)
  const [total, setTotal] = useAtom(priceAtom)
  useAtom(subDisocuntEffect)
  useAtom(subPriceEffect)
...

[dmaskasky]

Interesting about the semaphor not being needed. I was concerned about infinite loops resulting from changing atoms that other effects were listening too, but it looks like that concern was unwarranted. I updated the code I provided accordingly.

I saw that the two formulas were not symmetric. Symmetry is only necessary if changes recursively propagate. But since they do not, recalculation is only reacting to the top-level value change.

What I am doing is just comparing state management libraries

You should definitely checkout out the extensions list on the Jotai website. Jotai is a state manager that also supports other state managers and acts as a glue between them. For instance you can have an XState atom using atomWithMachine and an zustand atom using atomWithZustand in the same atom graph. Jotai will provide a common interface to interop with these atoms. I suppose you could do something similar with other state managers, its just food for thought. 🌮

[dmaskasky]

I should also mention that the vanilla 'jotai' way to do this is via a push based mechanic rather than a pull based one.

function getNextPrice(unitPrice: number, discount: number) {
  return unitPrice * (1 - discount / 100)
}
function getNextDiscount(unitPrice: number, price: number) {
  return ((unitPrice - price) / unitPrice) * 100
}

const unitPriceAtom = atom(100, (get, set, value: number) => {
  set(unitPriceAtom, value)
  set(priceAtom, getNextPrice(value, get(discountAtom)))
  set(discountAtom, getNextDiscount(value, get(priceAtom)))
})
const discountValueAtom = atom(0)
const discountAtom = atom(
  (get) => get(discountValueAtom),
  (get, set, value: number) => {
    set(discountValueAtom, value)
    set(priceValueAtom, getNextPrice(get(unitPriceAtom), value))
  }
)
const priceValueAtom = atom(100)
const priceAtom = atom(
  (get) => get(priceValueAtom),
  (get, set, value: number) => {
    set(priceValueAtom, value)
    set(discountValueAtom, getNextDiscount(get(unitPriceAtom), value))
  }
)

const priceAndDiscount = atom((get) => ({
  unitPrice: get(unitPriceAtom),
  discount: get(discountAtom),
  price: get(priceAtom),
}))

const store = createStore()
store.sub(priceAndDiscount, () => void 0)
await delay(0)
expect(store.get(priceAtom)).toBe(100) // value
expect(store.get(discountAtom)).toBe(0) // (100-100)/100*100 = 0)

store.set(discountAtom, 20)
await delay(0)
expect(store.get(priceAtom)).toBe(80) // 100*(1-20/100) = 80)
expect(store.get(discountAtom)).toBe(20) // value

store.set(priceAtom, 50)
await delay(0)
expect(store.get(priceAtom)).toBe(50) // value
expect(store.get(discountAtom)).toBe(50) // (100-50)/100*100 = 50)

store.set(unitPriceAtom, 200)
await delay(0)
expect(store.get(priceAtom)).toBe(100) // 200*(1-50/100) = 100)
expect(store.get(discountAtom)).toBe(50) // (200-100)/200*100 = 50)

[mar9000]

Interesting about the semaphor not being needed. I was concerned about infinite loops resulting from changing atoms that other effects were listening too, but it looks like that concern was unwarranted. I updated the code I provided accordingly.

the semaphor, or something similar, is probably needed but only if you uncomment the line:

//value = value + 0.01 // <-- generate infinite loop when added. (a)

that make the two formula non-symmetric and changes never end.
Without that line the cycle is triggered (see console.log) but it stops immediately: when you change the discount, the price gets calculated, then the discount gets calculated but the discount calculated value is equal to the inserted value. So changes stop.

[mar9000]

BTW I was investigating a spreadsheet-like solution, where I can add a cell/atom without chaning the exsting ones.
Hence my pull based approach. Thx for the suggestion.

[dmaskasky]

I'm curious what other state managers you found that can ergonomically do this.

[mar9000]

None.
In fact I wrote test code only for mobx and jotai, both have their gotchas, nevertheless Jotai seems to have fewer and simpler gotchas, at least in the simple test cases I wrote so far.