Writing an object of state values

[xavierakram]

Hi there, just trying to get my head around using Recoil in an application and I've got the following use-case:

const [totals, setTotals] = React.useState<Totals>({ gross: 0, vat: 0, total: 0, savings: 0, });

How would I create this as a Recoil state object? I've tried the following:

export const payment_state = {
  plan: atom({
    key: 'plan',
    default: '',
  }),
  seats: atom({
    key: 'seats',
    default: 2,
  }),
  unitPrice: atom({
    key: 'unitPrice',
    default: 35,
  }),
  product: atom({
    key: 'product',
    default: products[0] as IProductsType,
  }),
  totals: {
    gross: atom({
      key: 'gross',
      default: 0,
    }),
    vat: atom({
      key: 'vat',
      default: 0,
    }),
    total: atom({
      key: 'total',
      default: 0,
    }),
    savings: atom({
      key: 'savings',
      default: 0,
    }),
  },
};

Which is causing typescript errors, because totals isn't an atom.

[drarmstr]

It's fine to construct objects that contain atoms or selectors to represent your state. But, what is your error exactly? Are you trying to pass in totals directly to a hook such as useRecoilState()? It is correct that only atoms or selectors should be used for that hook parameter. e.g.

  const [gross, setGross] = useRecoilState(payment_state.totals.gross);

If you'd like to use all of the atoms at once, you could use waitForAll(), though it is currently read-only.

  const {gross, vat, total, savings} = useRecoilValue(waitForAll(payment_state.totals));

It is generally recommended to use atoms to represent primitives or simple values, as atoms and selectors are the granularity of subscriptions. However, if that isn't a concern and it is laborious to do so, you are free to store richer objects in atoms.