Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve grammar and update links to docs #44

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions app/quick-start/async-read-atoms/markdown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,25 @@ export const markdown = `
Using async atoms, you gain access to real-world data while still managing them directly from your atoms and with incredible ease.

We separate async atoms in two main categories:
•Async read atoms
•Async write atoms
Async read atoms
Async write atoms

Let's see first the async read atoms.
The \`read\` function of an atom can return a promise.
Let's first examine async read atoms.
The \`read\` function of an atom can return a Promise.
~~~js
const counter = atom(0);
const asyncAtom = atom(async (get) => get(counter) * 5);
~~~

Jotai is inherently leveraging \`Suspense\` to handle asynchronous flows.
Jotai inherently leverages \`Suspense\` to handle asynchronous flows.

~~~js
<Suspense fallback={<span>loading...</span>}>
<AsyncComponent />
</Suspense>
~~~

But there is a more jotai way of doing this with the \`loadable api\` present in \`jotai/utils\`. By simply wrapping the atom in loadable util and it returns the value with one of the three states: \`loading\`, \`hasData\` and \`hasError\`.
But there is a more Jotai-esque way of doing this using the [\`loadable\`](https://jotai.org/docs/utilities/async#loadable) API present in \`jotai/utils\`. By simply wrapping the atom in the \`loadable\` util, it returns the value with one of the three states: \`loading\`, \`hasData\`, and \`hasError\`.

~~~js
{
Expand Down
2 changes: 1 addition & 1 deletion app/quick-start/async-write-atoms/code.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ function Component() {
}
return (
<div className="app">
<p>Todays Goal: {todoGoal.title}</p>
<p>Today's Goal: {todoGoal.title}</p>
<button onClick={handleClick}>New Goal</button>
</div>
)
Expand Down
6 changes: 3 additions & 3 deletions app/quick-start/async-write-atoms/markdown.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const markdown = `
# Async Write Atoms

In Async write atoms the \`write\` function of atom returns a promise.
In Async write atoms, the \`write\` function of atom returns a Promise.

~~~js
const counter = atom(0);
Expand All @@ -11,9 +11,9 @@ const asyncAtom = atom(null, async (set, get) => {
});
~~~

**Note**: An important take here is that async write function does not trigger the Suspense.
**Note**: An important take here is that async write function does not trigger Suspense.

But an interesting pattern that can be achieved with Jotai is switching from async to sync to trigger suspending when wanted.
However, an interesting pattern that can be achieved with Jotai is switching from async to sync to trigger suspending when wanted.

~~~js
const request = async () => fetch('https://...').then((res) => res.json())
Expand Down
6 changes: 3 additions & 3 deletions app/quick-start/atom-creators/markdown.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const markdown = `
# Atom Creators

An atom creator means simply a function that returns an atom or a set of atoms. It's just a function and it's not some features that the library provides, but it's an important pattern to make a fairly complex use case. This avoids the boilerplate of having to set up another atom just to update the state of the first.
An atom creator is simply a function that returns an atom or a set of atoms. As a function, it lacks some features that the library provides, but it's an important pattern that can handle fairly complex use cases. Using an atom creator function will reduce the boilerplate of needing to set up a second atom just to update the state of the first.

Consider this case,
~~~js
Expand All @@ -14,7 +14,7 @@ const incBarAtom = atom(null, (get, set) => {
set(barAtom, c => c + 1);
};
~~~
Although you can attach the suitable actions to the setter of the respective atom, but this also increases boilerplate code when there are more atoms in your code.
Although you could attach the suitable actions to the setter of the respective atom, it would also add more boilerplate code when there are more atoms in your code.
~~~js
const incAllAtom = atom(null, (get, set, action) => {
if(action === 'inc1') // increase first atom
Expand All @@ -23,7 +23,7 @@ const incAllAtom = atom(null, (get, set, action) => {
}
~~~

So simply replace this with the atom creators function.
We can simplify this with an atom creator function.
~~~js
const createCountIncAtoms = (initialValue) => {
const baseAtom = atom(initialValue)
Expand Down
8 changes: 4 additions & 4 deletions app/quick-start/official-utils/markdown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ export const markdown = `
This is an overview of the atom creators/hooks utilities that can be found under \`jotai/utils\`.
We already covered \`atomWithStorage\` and \`loadable\` API in previous lessons.

1.[atomWithReset](https://jotai.org/docs/utils/atom-with-reset)
Creates an atom that could be reset to its initialValue with \`useResetAtom\` hook. It works exactly the same way as primitive atom would, but you are also able to set it to a special value [\`RESET\`](https://jotai.org/docs/utils/reset).
1.[atomWithReset](https://jotai.org/docs/utilities/resettable#atomwithreset)
Creates an atom that could be reset to its initialValue using the \`useResetAtom\` hook. It works exactly the same way as primitive atom would, but you are also able to set it to a special value [\`RESET\`](https://jotai.org/docs/utilities/resettable#reset).
~~~js
import { atomWithReset } from 'jotai/utils'

const counter = atomWithReset(1)
~~~

2.[selectAtom](https://jotai.org/docs/utils/select-atom)
2.[selectAtom](https://jotai.org/docs/utilities/select)
This function creates a derived atom whose value is a function of the original atom's value, determined by \`selector\`. The selector function runs whenever the original atom changes; it updates the derived atom only if \`equalityFn\` reports that the derived value has changed. By default, \`equalityFn\` is reference equality, but you can supply your favorite deep-equals function to stabilize the derived value where necessary.
~~~js
const defaultPerson = {
Expand All @@ -31,5 +31,5 @@ const defaultPerson = {
const nameAtom = selectAtom(personAtom, (person) => person.name, deepEqual)
~~~

Read [docs](https://jotai.org/docs/api/utils#overview) for more utils.
Read [docs](https://jotai.org/docs/introduction#utilities) for more utils.
`
2 changes: 1 addition & 1 deletion app/quick-start/persisting-state/markdown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ In this lesson, we will take a look at how we can persist the state value to \`l
Persisting state to \`localStorage\` can be challenging. You might want to persist the user's preferences or data for their next session.

Jotai \`atomWithStorage\` is a special kind of atom that automatically syncs the value provided to it with localstorage or sessionStorage, and picks the value upon the first load automatically. It's available in the \`jotai/utils\` module.
To persist our theme atom simply create it with the \`atomWithStorage\` atom.
To persist our theme atom, simply create it with the \`atomWithStorage\` atom.
~~~js
const theme = atomWithStorage('dark', false)
~~~
Expand Down
4 changes: 2 additions & 2 deletions app/quick-start/read-write-atoms/markdown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const readWriteAtom = atom((get) => get(count),
~~~

The first parameter is for reading and the second is for modifying the atom value.
Since the \`readWriteAtom\` is capable to read and set the original atom value, so we can only export \`readWriteAtom\` atom and can hide the original atom in a smaller scope. In this way we have to deal with less number of atoms in our app.
Since the \`readWriteAtom\` is capable of both reading and updating the original atom value, we can export \`readWriteAtom\` on its own and can hide the original atom in a smaller scope. This allows us to reduce the number of atoms in our app.

See the code how we use only \`handleMouseMoveAtom\` to read and update both the \`dotsArray\` in our app.
See the code for an example of how we can use only \`handleMouseMoveAtom\` to both read and update \`dotsAtom\` in our app.
`
2 changes: 1 addition & 1 deletion app/quick-start/readonly-atoms/markdown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const lastName = atom('Harris');
const fullName = atom((get) => get(firstName) + " " + get(lastName));
~~~

You can do more than just simply read the value of other atoms like \`filter\` and \`sorted\` out them or \`map\` over the values of the parent atom. And this is the beauty of it, Jotai gracefully lets you create dumb atoms derivated from even more dumb atoms.
You can do more than just simply read the value of other atoms. You can also \`filter\`, \`sort\`, or \`map\` over the values of the parent atom. And this is the beauty of it: Jotai gracefully lets you create dumb atoms derivated from even dumber atoms.
Here is a example of getting the list of all online and offline friends.
~~~js
const friendsStatus = atom([
Expand Down
17 changes: 11 additions & 6 deletions app/quick-start/write-only-atoms/markdown.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export const markdown = `
# Write Only atoms

With the help of writeOnly atoms you can modify the atoms it relies on. It's basically a two-way data binding, changing the derived atom also changes the parent atom and vice-versa, so use these atoms very carefully.
With the help of write-only atoms, you can modify the atoms it relies on. It's basically a two-way data binding, changing the derived atom also changes the parent atom and vice-versa, so use these atoms very carefully.

~~~js
const textAtom = atom('write only atoms')
Expand All @@ -10,16 +10,19 @@ const uppercase = atom(null, (get, set) => {
})
~~~

The first value of the callback is always be null and second is the function to modify the atom value. Let's take a more practical use case of write-only atoms.
The first value of the callback is always be null. The second value is the function that modifies the atom value.

Here we define a \`dotsAtom\` which is an atom of positions of points we draw on the canvas and a \`drawing\` atom.
Let's take a more practical use case of write-only atoms.

Here we define a \`dotsAtom\`, which is an atom of positions of points that we draw on the canvas, and a \`drawingAtom\`, which is a boolean atom.
~~~js
const dotsAtom = atom([]);
// true when we drawing on canvas
// true when we're drawing on the canvas
const drawingAtom = atom(false);
~~~

The \`handleMouseDownAtom\` and \`handleMouseUpAtom\` are two write-only atom that we use to set the value of \`drawing\` atom and \`handleMouseMoveAtom\` is a write-only atom which adds the position of new points to the \`dotsArray\` atom when we drawing on the canvas.
The \`handleMouseDownAtom\` and \`handleMouseUpAtom\` are two write-only atoms that we use to set the value of \`drawingAtom\`.
The \`handleMouseMoveAtom\` is a write-only atom which adds the position of new points to the \`dotsArray\` atom when we are drawing on the canvas.

~~~js
const handleMouseMoveAtom = atom(
Expand All @@ -32,5 +35,7 @@ const handleMouseMoveAtom = atom(
);
~~~

**Note:** You must be thinking that why we not updating the atoms value directly, why we use a write-only atom to update it's value. Well updating the value using the write-only atom prevents the extra rerenders in our app.
**Note:** You must be thinking, "Why are we not updating the atoms value directly? Why use a write-only atom to update its value?".

Well, updating the value using the write-only atoms prevents extra rerenders in our app.
`