jotai

Visite Jotai.org ou npm i jotai

O JOTAI escala de uma substituição simples de uso de uso para um aplicativo digital da empresa.

• API do núcleo mínimo (2kb)
• Muitos utilitários e extensões
• Nenhuma chave de string (comparada ao recuo)

Exemplos: Demo 1 | Demo 2

Primeiro, crie um átomo primitivo

Um átomo representa uma peça de estado. Tudo o que você precisa é especificar um valor inicial, que pode ser valores primitivos, como strings e números, objetos e matrizes. Você pode criar quantos átomos primitivos quiser.

 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 o átomo em seus componentes

Pode ser usado 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 >
      ...

Crie átomos derivados com valores calculados

Um novo átomo somente leitura pode ser criado a partir de átomos existentes, passando uma função de leitura como o primeiro argumento. get permite buscar o valor contextual de qualquer átomo.

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

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

Criando um átomo a partir de vários átomos

Você pode combinar vários átomos para criar um átomo derivado.

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

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

Ou se você gosta de padrões de FP ...

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

Átomos de assíncronos derivados

Você também pode fazer com que a função de leitura funcione uma função assíncrona.

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

Você pode criar um átomo derivado de gravidade

Especifique uma função de gravação no segundo argumento. get retornará o valor atual de um átomo. set atualizará o valor de um á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 >
      ...

Escreva apenas átomos derivados

Apenas não defina uma função de leitura.

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

Ações assíncronas

Basta fazer da função de gravação uma função assíncrona e set de chamadas quando estiver pronto.

 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 programação funcional

A interface fluida de Jotai não é acidente - os átomos são mônicos, assim como as promessas! Mônadas são um padrão estabelecido para código modular, puro, robusto e compreensível, que é otimizado para mudança. Leia mais sobre Jotai e Mônadas.

Links

• site
• documentação
• curso