jotai

Besuchen Sie Jotai.org oder npm i jotai

Jotai skaliert von einem einfachen Usestate -Ersatz in eine Enterprise TypeScript -Anwendung.

• Minimale Kern -API (2KB)
• Viele Versorgungsunternehmen und Erweiterungen
• Keine Stringschlüssel (im Vergleich zum Rückstoß)

Beispiele: Demo 1 | Demo 2

Erstellen Sie zunächst ein primitives Atom

Ein Atom repräsentiert ein Zustand. Alles, was Sie brauchen, ist, einen Anfangswert anzugeben, der primitive Werte wie Zeichenfolgen und Zahlen, Objekte und Arrays sein kann. Sie können so viele primitive Atome erstellen, wie Sie möchten.

 import { atom } from 'jotai'

const countAtom = atom ( 0 )
const countryAtom = atom ( 'Japan' )
const citiesAtom = atom ( [ 'Tokyo' , 'Kyoto' , 'Osaka' ] )
const mangaAtom = atom ( { 'Dragon Ball' : 1984 , 'One Piece' : 1997 , Naruto : 1999 } )

Verwenden Sie das Atom in Ihren Komponenten

Es kann wie React.useState verwendet werden:

 import { useAtom } from 'jotai'

function Counter ( ) {
  const [ count , setCount ] = useAtom ( countAtom )
  return (
    < h1 >
      { count }
      < button onClick = { ( ) => setCount ( ( c ) => c + 1 ) } > one up </ button >
      ...

Erstellen Sie abgeleitete Atome mit berechneten Werten

Ein neues schreibgeschütztes Atom kann aus vorhandenen Atomen erstellt werden, indem eine Lesefunktion als erstes Argument übergeben wird. get ermöglicht es Ihnen, den Kontextwert eines Atoms zu holen.

 const doubledCountAtom = atom ( ( get ) => get ( countAtom ) * 2 )

function DoubleCounter ( ) {
  const [ doubledCount ] = useAtom ( doubledCountAtom )
  return < h2 > { doubledCount } </ h2 >
}

Erstellen eines Atoms aus mehreren Atomen

Sie können mehrere Atome kombinieren, um ein abgeleitetes Atom zu erstellen.

 const count1 = atom ( 1 )
const count2 = atom ( 2 )
const count3 = atom ( 3 )

const sum = atom ( ( get ) => get ( count1 ) + get ( count2 ) + get ( count3 ) )

Oder wenn Sie FP -Muster mögen ...

 const atoms = [ count1 , count2 , count3 , ... otherAtoms ]
const sum = atom ( ( get ) => atoms . map ( get ) . reduce ( ( acc , count ) => acc + count ) )

Abgeleitete asynchrische Atome

Sie können die Lesefunktion auch zu einer asynchronen Funktion machen.

 const urlAtom = atom ( 'https://json.host.com' )
const fetchUrlAtom = atom ( async ( get ) => {
  const response = await fetch ( get ( urlAtom ) )
  return await response . json ( )
} )

function Status ( ) {
  // Re-renders the component after urlAtom is changed and the async function above concludes
  const [ json ] = useAtom ( fetchUrlAtom )
  . . .

Sie können ein beschreibbares abgeleitetes Atom erstellen

Geben Sie eine Schreibfunktion beim zweiten Argument an. get gibt den aktuellen Wert eines Atoms zurück. set aktualisiert den Wert eines Atoms.

 const decrementCountAtom = atom (
  ( get ) => get ( countAtom ) ,
  ( get , set , _arg ) => set ( countAtom , get ( countAtom ) - 1 )
)

function Counter ( ) {
  const [ count , decrement ] = useAtom ( decrementCountAtom )
  return (
    < h1 >
      { count }
      < button onClick = { decrement } > Decrease </ button >
      ...

Schreiben Sie nur abgeleitete Atome

Definieren Sie einfach keine Lesefunktion.

 const multiplyCountAtom = atom ( null , ( get , set , by ) =>
  set ( countAtom , get ( countAtom ) * by ) ,
)

function Controls ( ) {
  const [ , multiply ] = useAtom ( multiplyCountAtom )
  return < button onClick = { ( ) => multiply ( 3 ) } > triple </ button >
}

Asynchronen Aktionen

Machen Sie die Schreibfunktion einfach zu einer asynchronen Funktion und rufen Sie set , wenn Sie bereit sind.

 const fetchCountAtom = atom (
  ( get ) => get ( countAtom ) ,
  async ( _get , set , url ) => {
    const response = await fetch ( url )
    set ( countAtom , ( await response . json ( ) ) . count )
  }
)

function Controls ( ) {
  const [ count , compute ] = useAtom ( fetchCountAtom )
  return (
    < button onClick = { ( ) => compute ( 'http://count.host.com' ) } > compute </ button >
    . . .

Hinweis zur funktionalen Programmierung

Jotais flüssige Grenzfläche ist kein Zufall - Atome sind Monaden, genau wie Versprechen! Monaden sind ein etabliertes Muster für modulare, reine, robuste und verständliche Code, der für die Änderung optimiert wird. Lesen Sie mehr über Jotai und Monads.

Links

• Webseite
• Dokumentation
• Kurs