jotai

قم بزيارة jotai.org أو npm i jotai

يقيس Jotai من استبدال Usestate بسيط إلى تطبيق Enterprise TypeScript.

• الحد الأدنى من واجهة برمجة التطبيقات الأساسية (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 ليست مصادفة - الذرات موناد ، تمامًا مثل الوعود! Monads هي نمط ثابت لرمز وحدات ونقي وقوي ومفهومة والذي تم تحسينه للتغيير. اقرأ المزيد عن Jotai و Monads.

الروابط

• موقع إلكتروني
• الوثائق
• دورة