Suggested folder structure for atoms and selectors

Hi guys. This is a very promising library.

Is there a suggested folder structure for this? This is what I currently have in mind:

atoms/auth.js

import { atom } from "recoil";

export const userState = atom({
  key: "userState",
  default: {
    id: 123,
    name: "John Doe",
    email: "[e-mail]",
  },
});

// More atoms related to user

atoms/todo.js

import { atom } from "recoil";

export const todoState = atom({
  key: "todoState",
  default: [],
});

// More atoms related to todo

or we can have all atoms inside atoms/index.js and selectors inside selectors/index.js

import { atom } from "recoil";

export const userState = atom({
  key: "userState",
  default: {
    id: 123,
    name: "John Doe",
    email: "[e-mail]",
  },
});

export const todoState = atom({
  key: "todoState",
  default: [],
});

Then we can import it like this:

import { useRecoilState } from "recoil";
import { userState } from "./atoms/auth";

function LoginPage() {
  const [user, setUser] = useRecoilState(userState);

  return (...);
}

What do you guys think?

[davidmccabe]

Also, a major aspect of Recoil as that atoms and selectors can be interchanged with each other. So I would not expose whether something is an atom or selector in its public interface. And a lot of the time you’re going to be exporting hooks rather than the raw atom or selector.

[davidmccabe]

Honestly, just put atoms and selectors in the same module as the components that use them. If they need to be used across multiple modules, only then put them in their own modules. Co-locate as closely as possible. Organize by feature. Just my two cents.