jotai

Посетите jotai.org или npm i jotai

Jotai масштабируется от простой замены Usestate на приложение для корпоративного типового тиража.

• Минимальный ядро ​​API (2 КБ)
• Много коммунальных услуг и расширений
• Нет струнных клавиш (по сравнению с отдачей)

Примеры: демонстрация 1 | Демо 2

Во -первых, создать примитивный атом

Атом представляет собой часть состояния. Все, что вам нужно, это указать начальное значение, которое может быть примитивными значениями, такими как строки и числа, объекты и массивы. Вы можете создать столько примитивных атомов, сколько захотите.

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

Используйте атом в своих компонентах

Его можно использовать как 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 >
      ...

Создайте производные атомы с вычисленными значениями

Новый атом только для чтения может быть создан из существующих атомов, передавая функцию чтения в качестве первого аргумента. get позволяет вам получить контекстуальную ценность любого атома.

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

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

Создание атома из нескольких атомов

Вы можете объединить несколько атомов для создания производного атома.

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

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

Или если вам нравятся шаблоны FP ...

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

Полученные асинхронные атомы

Вы также можете сделать функцию чтения асинхронной функцией.

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

Вы можете создать атом для записи, полученный

Укажите функцию записи во втором аргументе. get вернет текущее значение атома. set будет обновлять значение атома.

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

Напишите только полученные атомы

Просто не определяйте функцию чтения.

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

Асинхронные действия

Просто сделайте функцию записи асинхронной функцией и set вызовов, когда вы будете готовы.

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

Примечание о функциональном программировании

Флюидная интерфейс Jotai не случайно - атомы - это монады, как обещания! Монады являются установленным шаблоном для модульного, чистого, надежного и понятного кода, который оптимизирован для изменений. Узнайте больше о Jotai и Monads.

Ссылки

• веб -сайт
• документация
• курс