jotai

Visitez jotai.org ou npm i jotai

Jotai évolue d'un simple remplacement UseState à une application TypeScript d'entreprise.

• API de base minimale (2KB)
• De nombreux services publics et extensions
• Pas de touches de chaîne (par rapport au recul)

Exemples: Demo 1 | Démo 2

Tout d'abord, créez un atome primitif

Un atome représente un élément d'état. Tout ce dont vous avez besoin est de spécifier une valeur initiale, qui peut être des valeurs primitives comme les chaînes et les nombres, les objets et les tableaux. Vous pouvez créer autant d'atomes primitifs que vous le souhaitez.

 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 } )

Utilisez l'atome dans vos composants

Il peut être utilisé comme React.useState :

 import { useAtom } from 'jotai'

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

Créer des atomes dérivés avec des valeurs calculées

Un nouvel atome en lecture seule peut être créé à partir d'atomes existants en passant une fonction de lecture comme le premier argument. get vous permet de récupérer la valeur contextuelle de tout atome.

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

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

Création d'un atome à partir d'atomes multiples

Vous pouvez combiner plusieurs atomes pour créer un atome dérivé.

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

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

Ou si vous aimez les modèles FP ...

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

Atomes asynchrones dérivés

Vous pouvez également faire de la fonction de lecture une fonction asynchrone.

 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 )
  . . .

Vous pouvez créer un atome dérivé en écriture

Spécifiez une fonction d'écriture au deuxième argument. get renvoiera la valeur actuelle d'un atome. set mettra à jour la valeur d'un atome.

 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 >
      ...

Écrire uniquement les atomes dérivés

Ne définissez pas une fonction de lecture.

 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 >
}

Actions asynchrones

Faites simplement la fonction d'écriture une fonction asynchrone et un set d'appels lorsque vous êtes prêt.

 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 >
    . . .

Remarque sur la programmation fonctionnelle

L'interface fluide de Jotai n'est pas un accident - les atomes sont des monades, tout comme les promesses! Les monades sont un modèle établi pour le code modulaire, pur, robuste et compréhensible qui est optimisé pour le changement. En savoir plus sur Jotai et Monads.

Links

• site web
• documentation
• cours