Menjelajahi Manajemen Status dalam Bereaksi Menggunakan Jotai: Panduan Praktis

Mengelola keadaan dalam proyek skala kecil umumnya langsung menggunakan kait dan alat peraga React. Namun, seiring berkembangnya aplikasi dan kebutuhan untuk berbagi dan mengakses data di berbagai komponen muncul, hal ini sering kali mengarah pada pengeboran penyangga. Sayangnya, prop drilling dapat dengan cepat mengacaukan basis kode dan menimbulkan tantangan skalabilitas.

Sementara Redux menawarkan solusi manajemen negara yang hebat, API-nya bisa sangat banyak untuk proyek yang relatif kecil. Sebaliknya, Jotai, perpustakaan manajemen negara bagian minimal yang memanfaatkan unit negara independen yang disebut atom untuk dikelola state, menghilangkan tantangan seperti prop drilling dan memungkinkan pengelolaan state yang lebih lugas dan dapat diskalakan mendekati.

Apa itu Jotai dan Bagaimana Cara Kerjanya?

Jotai adalah perpustakaan manajemen negara bagian yang menawarkan solusi manajemen negara sederhana berbeda dengan alternatif yang lebih kompleks seperti Redux. Ini menggunakan unit independen dari keadaan yang disebut atom untuk mengatur keadaan dalam aplikasi React.

Idealnya, berbagai komponen dalam aplikasi, mengakses dan memperbarui atom-atom ini menggunakan pengait yang disediakan oleh Jotai disebut useAtom. Berikut adalah contoh sederhana cara membuat atom Jotai:

impor {atom} dari'jotai';
const hitunganAtom = atom(1);

Untuk mengakses dan bekerja dengan atom di Jotai, Anda cukup menggunakan useAtom kait yang, seperti lainnya Bereaksi kait, memungkinkan Anda mengakses dan memperbarui nilai status dalam komponen fungsional.

Berikut adalah contoh untuk menunjukkan penggunaannya:

impor { useAtom } dari'jotai';
const hitunganAtom = atom(1);
fungsiKomponen Saya() {
const [menghitung, setCount] = useAtom (countAtom);
const kenaikan = () => set Hitung((prevCount) => prevCount + 1);
kembali (


Hitung: {hitung}</p>
Peningkatan</button>
 </div>
 );
}

Dalam contoh ini, useAtom hook digunakan untuk mengakses countAtom atom dan nilainya. Itu setHitung fungsi digunakan untuk memperbarui nilai atom dan setiap komponen terkait akan secara otomatis dirender ulang dengan nilai yang diperbarui.

Dengan hanya memicu komponen yang terpengaruh, ini mengurangi rendering ulang yang tidak perlu di seluruh aplikasi. Pendekatan yang ditargetkan untuk rendering ulang ini meningkatkan kinerja aplikasi secara keseluruhan.

Dengan dasar-dasarnya, mari membangun aplikasi To-do React sederhana untuk lebih memahami kemampuan manajemen status Jotai.

Manajemen Negara dalam Bereaksi Menggunakan Jotai

Untuk memulai, membuat aplikasi Bereaksi. Alternatifnya, Anda bisa gunakan Vite untuk menyiapkan proyek React. Setelah Anda membuat scaffold aplikasi React dasar, lanjutkan dan instal Jotai di aplikasi Anda.

npm instal jotai

Selanjutnya, untuk memanfaatkan Jotai di aplikasi Anda, Anda perlu membungkus seluruh aplikasi Anda dengan Pemberi komponen. Komponen ini berisi penyimpanan yang berfungsi sebagai hub pusat untuk memberikan nilai atom di seluruh aplikasi.

Selain itu, ini memungkinkan Anda untuk mendeklarasikan keadaan awal atom. Dengan membungkus aplikasi Anda dengan Pemberi, semua komponen dalam aplikasi mendapatkan akses ke atom yang telah Anda tentukan, dan mereka kemudian dapat berinteraksi dengan, dan memperbarui status melalui useAtom kait.

impor { Pemberi } dari"jotai";

Sekarang bungkus aplikasi di index.js atau main.jsx seperti yang ditunjukkan di bawah ini.

impor Reaksi dari'reaksi'
impor ReactDOM dari'reaksi-dom/klien'
impor Aplikasi dari'./App.jsx'
impor'./index.css'
impor { Pemberi } dari"jotai";
ReactDOM.createRoot(dokumen.getElementById('akar')).memberikan(



 </Provider>
 </React.StrictMode>,
)

Konfigurasikan Penyimpanan Data

Store bertindak sebagai repositori pusat untuk status aplikasi. Ini biasanya berisi definisi atom, penyeleksi, dan fungsi terkait lainnya yang diperlukan untuk manajemen status menggunakan Jotai.

Dalam hal ini, ia mengelola atom untuk mengelola daftar item untuk aplikasi To-do. Dalam src direktori, buat TodoStore.jsx file, dan tambahkan kode di bawah ini.

impor {atom} dari"jotai";
eksporconst TodosAtom = atom([]);

Dengan membuat dan mengekspor file TodosAtom, Anda dapat dengan nyaman berinteraksi dan memperbarui status daftar tugas di berbagai komponen dalam aplikasi.

Terapkan Fungsionalitas Aplikasi To-Do

Sekarang setelah Anda mengonfigurasi Jotai di aplikasi React dan membuat atom untuk mengelola status aplikasi, lanjutkan ke depan, dan buat komponen tugas sederhana yang akan menangani fungsi tambah, hapus, dan edit untuk tugas item.

Buat yang baru komponen/Todo.jsx berkas di src direktori. Dalam file ini, tambahkan kode di bawah ini:

1. Impor penyimpanan data dan useAtom kait.

   impor Bereaksi, { useState } dari'reaksi';
   impor { TodosAtom } dari'../TodoStore';
   impor { useAtom } dari'jotai';

2. Buat komponen fungsional dan tambahkan elemen JSX.

   const Todo = () => {
   
   kembali (
   
   
    placeholder="Aktivitas baru"
    nilai={nilai}
    onChange={event => setValue (event.target.value)}
    />
   Tambahkan Tugas</button>
   
   
    {todos.peta(melakukan => (
   
   
    {todo.text}
    handleDelete (todo.id)}>Hapus</button>
    </li>
    ))}
    </ul>
    </div>
    );
   };