Solution for near-global atom use in atomFamily params

[awdyson]

I'm curious if there's a way for atomFamilys to rely on an atom without needing to fetch/pass it in each consuming component.

Here's an example of a code pattern I find myself repeating all over:

const brandId = useRecoilValue(brandStore.currentBrandId);
const products = useRecoilValue(productStore.productList({ brandId }));

currentBrandId is an atom because it's not uncommonly user-changed.
productList is an atomFamily to deal with things like data refreshes/updates.

We're already saving currentBrandId in sessionStorage as part of its set method.
It'd be nice to register a listener on sessionStorage to keep the logic together and smaller.

[rbaxter08]

Seems like you could accomplish this with a selector / selectorFamily https://recoiljs.org/docs/api-reference/utils/selectorFamily/

// import currentBrandId Atom
import { currentBrandId } from ...

const currentProductList= selector({
  key: 'current-product-list',
  get: ({get}) => {
    const brandId = get(currentBrandId)
    // logic from "productList" to return product list for the brandId
  }
});

[awdyson]

I'm saying that I've got a method like this:

const brandId = useRecoilValue(brandStore.currentBrandId);
const [products, setProducts] = useRecoilState(productStore.productList({ brandId }));

// ...

async function addProduct(productData) {
  await api.postProduct(productData);
  const newProducts = await api.getProducts({ brandId });
  setProducts(newProducts);
}

productList only depends on brandId, but it can be updated by other factors.
That means that a selector[Family] isn't fitting, right?

[awdyson]

Am I understanding the "ReadWrite" Selector correctly?
That it can trigger set calls on atoms but can't update itself?

[rbaxter08]

Selectors can also define a set method. So, if you have one atom to store the brandId and an atomFamily to store the productList, your code could look something like

import { currentBrandIdAtom } from ...
import { productListAtomFamily } from ...

const selectCurrentProductList= selector({
  key: 'current-product-list',
  get: ({get}) => {
    const brandId = get(currentBrandIdAtom);
    return get(productListAtom({ brandId }));
  },
  set: ({ get, set}, productList) => {
    const brandId = get(currentBrandIdAtom);
    set(productListAtomFamily({ brandId }), productList);
  }
});

const brandId = useRecoilValue(productStore.brandId);
const [products, setProducts] = useRecoilState(productStore.selectProductList());

// ...

async function addProduct(productData) {
  await api.postProduct(productData);
  const newProducts = await api.getProducts({ brandId });
  setProducts(newProducts);
}

[rbaxter08]

That it can trigger set calls on atoms but can't update itself?

right, because selectors themselves don't store state, they represent derived state. So, you don't use the selectors set to update itself, but to update other Atoms.

[awdyson]

Alright, I thought that might be the suggested solution.
I think I'll keep the redundancy of needing currentBrandId everywhere.
For this project, at least, it feels like "less abstraction in stores" > "less recoil hook repetition".

Thank you very much for the quick responses.
At the very least, you've helped me feel more confident in my understanding of this library :)

Also I guess, this can be considered a vote for adding something like watchAtom or watchStorage to AtomOptions.
If that's a terrible idea, feel free to just ignore it.

[drarmstr]

Thanks @rbaxter08 Also please see this example in the docs for this pattern.