Menjelajahi Manajemen Status dalam Bereaksi Menggunakan Jotai: Panduan Praktis
Table of content:
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 pengelolaan keadaan minimal yang memanfaatkan unit keadaan independen yang disebut atom untuk mengelola keadaan, meniadakan tantangan seperti pengeboran penyangga dan memungkinkan pendekatan pengelolaan keadaan yang lebih lugas dan dapat diskalakan.
Baca Juga:
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:
import { atom } from 'jotai';
const countAtom = atom(1); Untuk mengakses dan bekerja dengan atom di Jotai, Anda cukup menggunakan useAtom hook yang, seperti hook React lainnya, memungkinkan Anda untuk mengakses dan memperbarui nilai status di dalam komponen fungsional.
Berikut adalah contoh untuk menunjukkan penggunaannya:
import { useAtom } from 'jotai';const countAtom = atom(1);
function MyComponent() {
const [count, setCount] = useAtom(countAtom);
const increment = () => setCount((prevCount) => prevCount + 1);
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</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, buat aplikasi React. Sebagai alternatif, Anda dapat menggunakan Vite untuk menyiapkan proyek React. Setelah Anda membuat scaffold aplikasi React dasar, lanjutkan dan instal Jotai di aplikasi Anda.
npm install 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 Pemberisemua komponen dalam aplikasi mendapatkan akses ke atom yang telah Anda tentukan, dan mereka kemudian dapat berinteraksi dengan, dan memperbarui status melalui useAtom kait.
import { Provider } from "jotai"; Sekarang bungkus aplikasi di index.js atau main.jsx seperti yang ditunjukkan di bawah ini.
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { Provider } from "jotai";ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Provider>
<App />
</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.
import { atom } from "jotai";
export const TodosAtom = atom([]); Dengan membuat dan mengekspor file TodosAtomAnda 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, dan buat komponen tugas sederhana yang akan menangani fungsi tambah, hapus, dan edit untuk item tugas.
Buat yang baru komponen/Todo.jsx berkas di src direktori. Dalam file ini, tambahkan kode di bawah ini:
- Impor penyimpanan data dan useAtom kait.
import React, { useState } from 'react';
import { TodosAtom } from '../TodoStore';
import { useAtom } from 'jotai'; - Buat komponen fungsional dan tambahkan elemen JSX.
const Todo = () => {
return (
<div>
<input
placeholder="New todo"
value={value}
onChange={event => setValue(event.target.value)}
/>
<button onClick={handleAdd}>Add Todo</button>
<ul>
{todos.map(todo => (
<li key={todo.id}>
{todo.text}
<button onClick={() => handleDelete(todo.id)}>Delete</button>
</li>
))}
</ul>
</div>
);
};export default Todo;
Komponen merender antarmuka pengguna yang sederhana untuk mengelola daftar item yang harus dilakukan.
- Terakhir, implementasikan fungsi tambah dan hapus to-dos.
const [value, setValue] = useState('');
const [todos, setTodos] = useAtom(TodosAtom);const handleAdd = () => {
if (value.trim() !== '') {
setTodos(prevTodos => [
...prevTodos,
{
id: Date.now(),
text: value
},
]);
setValue('');
}
};const handleDelete = id => {
setTodos(prevTodos => prevTodos.filter(todo => todo.id !== id));
};
Itu handleAdd fungsi bertanggung jawab untuk menambahkan item to-do baru ke daftar item. Pertama, memeriksa apakah nilai variabel tidak kosong. Kemudian itu membuat item agenda baru dengan ID unik dan item agenda yang dimasukkan sebagai kontennya.
Itu setTodos fungsi kemudian dipanggil untuk memperbarui daftar item yang harus dilakukan di atom dengan menambahkan item baru. Terakhir, the nilai status disetel ulang ke string kosong setelah operasi penambahan.
Di sisi lain, handleDelete fungsi bertanggung jawab untuk menghapus item yang harus dilakukan dari daftar. Itu memfilter item yang harus dilakukan menggunakan ID yang ditentukan dari daftar yang ada dengan memanfaatkan prevTodos.filter metode. Itu kemudian memperbarui daftar menggunakan setTodos fungsi—secara efektif menghapus item tugas yang ditentukan dari daftar.
Menggunakan Jotai untuk Mengelola Status di Aplikasi React
Panduan ini telah memberikan pengantar untuk menggunakan Jotai sebagai solusi manajemen negara bagian. Meskipun demikian, ada fitur hebat lainnya seperti kemampuan untuk membuat atom asinkron yang dirancang khusus untuk mengelola keadaan yang melibatkan operasi asinkron seperti panggilan API.
Selain itu, Anda juga dapat membuat atom turunan, yang digunakan untuk menghitung dan memperoleh nilai dari atom yang ada, memungkinkan Anda mengelola status kompleks berdasarkan bagian lain dari aplikasi.
Dengan memanfaatkan fitur manajemen status ini, Anda dapat membuat aplikasi React yang lebih tangguh dan dapat diskalakan.
Artikel Terkait
