Suggested folder structure for atoms and selectors
See original GitHub issueHi guys. This is a very promising library.
Is there a suggested folder structure for this? This is what I currently have in mind:
![Screen Shot 2020-05-15 at 10 13 48 PM](https://user-images.githubusercontent.com/13049130/82060026-5ed10080-96f9-11ea-84a1-c99304e58ac3.png)
atoms/auth.js
import { atom } from "recoil";
export const userState = atom({
key: "userState",
default: {
id: 123,
name: "John Doe",
email: "test@gmail.com",
},
});
// 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: "test@gmail.com",
},
});
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?
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Recoil Project Structure Best Practices - Wesley Rast - Medium
A single directory is created under /src/recoil which is then split into /atoms and /selectors . This works, but there's a fundamental ...
Read more >How to organize your components using the Atomic Design
Folder structure. First of all we have to create our folder structure in which store our components. So, let's create a src directory...
Read more >Does it matter where you declare Atoms when using Recoil?
It's generally the right approach to declare and export the recoil states (atoms/selectors/etc.) in one module, and then import them into ...
Read more >Core Concepts | Recoil
Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components....
Read more >How to use Recoil State Management Tool in React
key – A unique key (with respect to other atoms/selectors); default – A default ... Here, we are using the best folder and...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.
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.