Cách quản lý trạng thái trong React bằng Jotai

Nâng cấp quản lý trạng thái của app React bằng Jotai là một lựa chọn thay thế đơn giản hơn cho Redux, và hoàn hảo cho dự án nhỏ. Dưới đây là hướng dẫn chi tiết.

Quản lý trạng thái ở các dự án quy mô nhỏ thường đơn giản bằng các hook và thuộc tính React. Tuy nhiên, khi ứng dụng phát triển và cần chia sẻ truy cập dữ liệu giữa những thành phần phát sinh, nó thường dẫn tới prop drilling. Đáng tiếc, prop drilling có thể nhanh chóng làm lộn xộn codebase và đưa ra những thử thách có khả năng mở rộng.

Trong khi Redux cung cấp giải pháp quản lý trạng thái, API của nó có thể áp đảo những dự án tương đối nhỏ. Ngược lại, Jotai là một thư viện quản lý trạng thái đơn giản, tận dụng các đơn vị trạng thái độc lập được gọi là nguyên tử để quản lý trạng thái, loại bỏ các thách thức như prop drilling và cho phép tiếp cận quản lý trạng thái đơn giản, đồng thời có thể mở rộng hơn.

Jotai là gì và cách thức hoạt động của nó?

Jotai là thư viện quản lý trạng thái cung cấp giải pháp đơn giản hơn so với những lựa chọn thay thế phức tạp như Redux. Nó dùng các đơn vị độc lập của trạng thái tên atom - nguyên tử để quản lý trạng thái ở ứng dụng React.

Tuyệ vời nhất là các thành phần khác nhau trong ứng dụng này, truy cập và update những atom đó bằng hook do Jotai cung cấp tên useAtom. Đây là một mẫu ví dụ về cách tạo một atom Jotai:

import { atom } from 'jotai';
const countAtom = atom(1);

Để truy cập và làm việc với các atom trong Jotai, bạn có thể dùng hook useAtom, giống như mọi hook React khác, cho phép bạn truy cập và update giá trị của trạng thái trong thành phần chức năng.

Đây là ví dụ minh chứng cho cách sử dụng của nó:

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

Ở ví dụ này, hook useAtom được dùng để truy cập atom countAtom và giá trị liên quan của nó. Hàm setCount được dùng để update giá trị của atom và bất kỳ thành phần được liên kết sẽ tự động kết xuất lại với giá trị được update.

Bằng cách chỉ kích hoạt các thành phần bị ảnh hưởng, nó sẽ giảm số lần hiển thị lại không cần thiết trên ứng dụng. Cách tiếp cận được nhắm mục tiêu này để kết xuất lại nhằm nâng cao hiệu suất tổng thể của ứng dụng.

Một khi đã nắm được những kiến thức cơ bản, hãy cùng nhau bắt tay vào xây dựng một app To-do React để hiểu rõ hơn những khả năng quản lý trạng thái của Jotai.

Quản lý trạng thái trong React bằng Jotai

Để bắt đầu, tạo app React. Ngoài ra, bạn có thể dùng Vite để thiết lập dự án React. Khi scaffold một ứng dụng React cơ bản, tiếp tục và cài đặt Jotai trong ứng dụng của bạn.

npm install jotai

Tiếp theo, để dùng Jotai trong ứng dụng, bạn cần bao gồm toàn bộ app với thành phần Provider. Thành phần này chứa một nơi hoạt động như thành phần trung tâm, chuyên cung cấp giá trị atom cho toàn bộ ứng dụng.

Thêm vào đó, nó cho phép bạn khai báo trạng thái atom ban đầu. Bằng cách gắn app của bạn với Provider, toàn bộ thành phần trong ứng dụng có quyền truy cập atom bạn đã xác định, sau đó chúng có thể tương tác và update trạng thái qua hook useAtom.

import { Provider } from "jotai";

Giờ bao gồm app trong index.js hoặc main.jsx như bên dưới:

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

Cấu hình Data Store

Store hoạt động như một repository trung tâm cho trạng thái của ứng dụng. Nó thường chứa định nghĩa của atom, bộ chọn và bất kỳ hàm được liên quan khác cần cho quản lý trạng thái bằng Jotai.

Trong trường hợp này, nó quản lý các atom để quản lý danh sách mục cho ứng dụng To-do. Ở thư mục src, tạo TodoStore.jsx và thêm code bên dưới:

import { atom } from "jotai";
export const TodosAtom = atom([]);

Bằng cách tạo và xuất TodosAtom, bạn có thể thoải mái tương tác và update trạng thái cần làm trên các thành phần khác nhau trong ứng dụng.

Triển khai chức năng ứng dụng To-Do

Giờ bạn đã có Jotai được cấu hình trong app React và đã tạo một atom dể quản lý trạng thái của ứng dụng, tiếp tục và tạo một thành phần to-do đơn giản để thực hiện các chức năng thêm, xóa và chỉnh sửa cho những mục cần xử lý.

Tạo file components/Todo.jsx mới trong thư mục src. Trong file này, thêm code bên dưới:

1. Nhập kho dữ liệu và hook useAtom:

import React, { useState } from 'react';
import { TodosAtom } from '../TodoStore';
import { useAtom } from 'jotai';

2. Tạo thành phần chức năng và thêm các nhân tố 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;

Thành phần này hiện một giao diện người dùng đơn giản để quản lý danh sách các mục cần làm.

3. Cuối cùng, triển khai hàm thêm và xóa mục cần làm.

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

• Hàm handeAdd chịu trách nhiệm thêm mục cần làm mới vào danh sách.
• setTodos được gọi sau đó để update danh sách mục cần làm trong atom bằng cách bổ sung mục mới đó.
• handleDelete chịu trách nhiệm loại bỏ mục cần làm khỏi danh sách.

Trên đây là cách dùng Jotai quản lý trạng thái trong app React. Hi vọng bài viết hữu ích với các bạn.