jotai

Visite jotai.org o npm i jotai

Jotai se escala de un simple reemplazo de USEsestate a una aplicación TypeScript empresarial.

• API de núcleo mínimo (2kb)
• Muchos servicios públicos y extensiones
• No hay teclas de cadena (en comparación con el retroceso)

Ejemplos: demostración 1 | Demo 2

Primero, crea un átomo primitivo

Un átomo representa una pieza de estado. Todo lo que necesita es especificar un valor inicial, que puede ser valores primitivos como cadenas y números, objetos y matrices. Puede crear tantos átomos primitivos como desee.

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

Use el átomo en sus componentes

Se puede usar como 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 >
      ...

Crear átomos derivados con valores calculados

Se puede crear un nuevo átomo de solo lectura a partir de átomos existentes al pasar una función de lectura como el primer argumento. get le permite obtener el valor contextual de cualquier átomo.

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

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

Creando un átomo a partir de múltiples átomos

Puede combinar múltiples átomos para crear un átomo derivado.

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

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

O si te gustan los patrones de FP ...

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

Átomos de asíncrono derivados

Puede hacer que la función de lectura también sea una función async.

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

Puedes crear un átomo derivado de escritura

Especifique una función de escritura en el segundo argumento. get devolverá el valor actual de un átomo. set actualizará el valor de un átomo.

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

Escribir solo átomos derivados

Simplemente no defina una función de lectura.

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

Acciones asíncronas

Simplemente haga que la función de escritura sea una función async y set de llamadas cuando esté listo.

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

Nota sobre la programación funcional

La interfaz fluida de Jotai no es accidente: ¡los átomos son mónadas, al igual que las promesas! Las mónadas son un patrón establecido para un código modular, puro, robusto y comprensible que está optimizado para el cambio. Lea más sobre Jotai y Mónadas.

Campo de golf

• sitio web
• documentación
• curso