jotai

Kunjungi jotai.org atau npm i jotai

Jotai berskala dari penggantian Usestate sederhana ke aplikasi TypeScript Enterprise.

• API inti minimal (2KB)
• Banyak utilitas dan ekstensi
• Tidak ada tombol string (dibandingkan dengan recoil)

Contoh: Demo 1 | Demo 2

Pertama, buat atom primitif

Atom mewakili sepotong negara. Yang Anda butuhkan adalah menentukan nilai awal, yang dapat berupa nilai primitif seperti string dan angka, objek, dan array. Anda dapat membuat atom primitif sebanyak yang Anda inginkan.

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

Gunakan atom di komponen Anda

Itu dapat digunakan seperti React.useState . Usestate:

 import { useAtom } from 'jotai'

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

Buat atom yang diturunkan dengan nilai yang dihitung

Atom read-only baru dapat dibuat dari atom yang ada dengan melewati fungsi baca sebagai argumen pertama. get memungkinkan Anda untuk mengambil nilai kontekstual dari atom apa pun.

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

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

Menciptakan atom dari beberapa atom

Anda dapat menggabungkan beberapa atom untuk membuat atom yang diturunkan.

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

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

Atau jika Anda menyukai pola FP ...

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

Atom async berasal

Anda dapat menjadikan fungsi baca fungsi async juga.

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

Anda dapat membuat atom turunan yang dapat ditulis

Tentukan fungsi tulis pada argumen kedua. get akan mengembalikan nilai atom saat ini. set akan memperbarui nilai atom.

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

Tulis hanya atom yang diturunkan

Jangan mendefinisikan fungsi baca.

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

Tindakan Async

Buat saja fungsi tulis sebagai fungsi async dan set panggilan saat Anda siap.

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

Perhatikan tentang pemrograman fungsional

Antarmuka fluida Jotai bukanlah kecelakaan - atom adalah monad, seperti janji! Monad adalah pola yang mapan untuk kode modular, murni, kuat dan dapat dimengerti yang dioptimalkan untuk perubahan. Baca lebih lanjut tentang Jotai dan Monads.

Tautan

• situs web
• dokumentasi
• kursus