diff --git a/app/quick-start/async-read-atoms/markdown.ts b/app/quick-start/async-read-atoms/markdown.ts index cdbdf9c..19276f1 100644 --- a/app/quick-start/async-read-atoms/markdown.ts +++ b/app/quick-start/async-read-atoms/markdown.ts @@ -4,17 +4,17 @@ 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 loading...}> @@ -22,7 +22,7 @@ Jotai is inherently leveraging \`Suspense\` to handle asynchronous flows. ~~~ -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 { diff --git a/app/quick-start/async-write-atoms/code.ts b/app/quick-start/async-write-atoms/code.ts index 33e7172..8bf79c9 100644 --- a/app/quick-start/async-write-atoms/code.ts +++ b/app/quick-start/async-write-atoms/code.ts @@ -51,7 +51,7 @@ function Component() { } return (
-

Todays Goal: {todoGoal.title}

+

Today's Goal: {todoGoal.title}

) diff --git a/app/quick-start/async-write-atoms/markdown.ts b/app/quick-start/async-write-atoms/markdown.ts index a12d4ba..20c0c73 100644 --- a/app/quick-start/async-write-atoms/markdown.ts +++ b/app/quick-start/async-write-atoms/markdown.ts @@ -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); @@ -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()) diff --git a/app/quick-start/atom-creators/markdown.ts b/app/quick-start/atom-creators/markdown.ts index 98ad9f6..8e69a87 100644 --- a/app/quick-start/atom-creators/markdown.ts +++ b/app/quick-start/atom-creators/markdown.ts @@ -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 @@ -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 @@ -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) diff --git a/app/quick-start/official-utils/markdown.ts b/app/quick-start/official-utils/markdown.ts index 71fa1ef..6b60803 100644 --- a/app/quick-start/official-utils/markdown.ts +++ b/app/quick-start/official-utils/markdown.ts @@ -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 = { @@ -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. ` \ No newline at end of file diff --git a/app/quick-start/persisting-state/markdown.ts b/app/quick-start/persisting-state/markdown.ts index 0760278..9859105 100644 --- a/app/quick-start/persisting-state/markdown.ts +++ b/app/quick-start/persisting-state/markdown.ts @@ -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) ~~~ diff --git a/app/quick-start/read-write-atoms/markdown.ts b/app/quick-start/read-write-atoms/markdown.ts index 5cffd2e..7fe5a48 100644 --- a/app/quick-start/read-write-atoms/markdown.ts +++ b/app/quick-start/read-write-atoms/markdown.ts @@ -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. ` \ No newline at end of file diff --git a/app/quick-start/readonly-atoms/markdown.ts b/app/quick-start/readonly-atoms/markdown.ts index 136373a..a02b3d0 100644 --- a/app/quick-start/readonly-atoms/markdown.ts +++ b/app/quick-start/readonly-atoms/markdown.ts @@ -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([ diff --git a/app/quick-start/write-only-atoms/markdown.ts b/app/quick-start/write-only-atoms/markdown.ts index e0dbd3b..5ec4c0a 100644 --- a/app/quick-start/write-only-atoms/markdown.ts +++ b/app/quick-start/write-only-atoms/markdown.ts @@ -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') @@ -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( @@ -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. ` \ No newline at end of file