[Jotai] State Management with Jotai — React and TypeScript ready library — World of Atoms

https://medium.com/@maciejpoppek/state-management-with-jotai-react-and-typescript-ready-library-a40ac967ac3e

Những điểm cần nhớ:

• nguyên tử — hàm tạo ra một nguyên tử mới (một phần trạng thái).

• useAtom — một hook cung cấp quyền truy cập vào cả phương thức getter và setter cho một atom.

• useSetAtom — một hook cung cấp quyền truy cập vào phương thức setter cho một atom.

• useAtomValue — một hook cung cấp quyền truy cập vào phương thức getter lấy dữ liệu cho một nguyên tử.

• atomWithReset, useResetAtom, và giá trị đặc biệt RESET liên quan đến việc quản lý trạng thái có thể reset được.

• 👉 Nếu muốn tạo một atom có khả năng reset: Dùng atomWithReset 👉 Nếu muốn reset atom bằng một hook: Dùng useResetAtom 👉 Nếu muốn reset atom bằng cách gọi hằng số: Dùng RESET

• atom — function that creates a new atom (a piece of state).

• useAtom — a hook that provides access to both getter and setter methods for an atom.

• useSetAtom — a hook that provides access to the setter method for an atom.

• useAtomValue — a hook that provides access to the getter method for an atom.

Example 1 (Phần cơ bản)

src\Counter.tsx

import React from 'react';
import { useAtom } from 'jotai';
import { countAtom } from './model/atoms';
export const Counter: React.FC = () => {
  const [count, setCount] = useAtom(countAtom);
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};

src\CreateTask.tsx

import React, { useState } from 'react';
import { useSetAtom } from 'jotai';
import { tasksAtom } from './model/atoms';
export const CreateTask: React.FC = () => {
  const setTasks = useSetAtom(tasksAtom);
  const [task, setTask] = useState('');
  const addTask = () => {
    setTasks((prev) => [...prev, {
      name: task,
    }]);
    setTask('');
  };
  return (
    <div>
      <h2>Create a new task</h2>
      <input type="text" value={task} onChange={(e) => setTask(e.target.value)} />
      <button onClick={addTask}>Add Task</button>
    </div>
  );
}

src\TasksList.tsx

import React from 'react';
import { useAtomValue } from 'jotai';
import { tasksAtom } from './model/atoms';
export const TasksList: React.FC = () => {
  const tasks = useAtomValue(tasksAtom);
  return (
    <div>
      <h2>Tasks List</h2>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task.name}</li>
        ))}
      </ul>
    </div>
  )
}

src\model\atoms.ts

import { atom } from 'jotai';
interface Task {
  name: string;
}
export const countAtom = atom(0);
export const tasksAtom = atom<Task[]>([]);

src\App.tsx

import { Counter } from './Counter';
import { CreateTask } from './CreateTask';
import { TasksList } from './TasksList';
function App() {
  return (
    <div className="App">
      <Counter />
      <CreateTask />
      <TasksList />
    </div>
  );
}
export default App;

Example 2 (Phần mở rộng)

Nói chung dùng hằng số RESET ngắn gọn hơn không phải dùng qua function useResetAtom dùng phức tạp hơn

src\App.tsx

import Counter from "./reset";
function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}
export default App;

src\reset.tsx

import { useAtom } from 'jotai';
import { atomWithReset, useResetAtom,RESET} from 'jotai/utils';
const countAtom = atomWithReset(0);
function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const resetCount = useResetAtom(countAtom);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((prev:number) => prev + 1)}>Increment</button>
      <button onClick={resetCount}>resetCount</button>
      <button onClick={() => setCount(RESET)}>RESET</button>
    </div>
  );
}
export default Counter;

1. atomWithReset

tsxCopyEditimport { atomWithReset } from 'jotai/utils';

const countAtom = atomWithReset(0);

• atomWithReset là một phiên bản mở rộng của atom, nhưng có hỗ trợ reset lại giá trị ban đầu.

• Khi dùng useResetAtom, trạng thái của atom có thể trở về giá trị khởi tạo.

2. useResetAtom

tsxCopyEditimport { useAtom } from 'jotai';
import { useResetAtom } from 'jotai/utils';

const countAtom = atomWithReset(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const resetCount = useResetAtom(countAtom);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
      <button onClick={resetCount}>Reset</button>
    </div>
  );
}

• useResetAtom(atom) trả về một hàm giúp đặt lại atom về giá trị mặc định.

• Không cần truyền giá trị cụ thể khi reset, nó tự động đặt lại về giá trị mặc định của atomWithReset.

3. RESET

tsxCopyEditimport { RESET } from 'jotai/utils';

function Counter() {
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
      <button onClick={() => setCount(RESET)}>Reset</button>
    </div>
  );
}

• RESET là một giá trị đặc biệt, khi truyền vào setAtom, nó sẽ đặt lại atom về giá trị khởi tạo.

• Hữu ích khi muốn reset một atom mà không cần gọi useResetAtom.

So sánh

Tính năng	atomWithReset	useResetAtom	RESET
Tạo atom có thể reset	✅	❌	❌
Hook reset atom	❌	✅	❌
Truyền trực tiếp vào setAtom để reset	❌	❌	✅

👉 Nếu muốn tạo một atom có khả năng reset: Dùng atomWithReset 👉 Nếu muốn reset atom bằng một hook: Dùng useResetAtom 👉 Nếu muốn reset atom bằng cách gọi setAtom: Dùng RESET

Bạn đang gặp vấn đề gì khi sử dụng những thứ này không?

Quản lý trạng thái trong các ứng dụng web hiện đại có thể là một nhiệm vụ khó khăn, đặc biệt là khi ứng dụng của bạn ngày càng phức tạp. React, một thư viện phổ biến để xây dựng giao diện người dùng, cung cấp các công cụ tích hợp như useState, useContext và useReducer để quản lý trạng thái. Tuy nhiên, khi nhu cầu trạng thái của bạn tăng lên, các công cụ này có thể trở nên không đủ. Đây chính là lúc Jotai xuất hiện — một thư viện quản lý trạng thái hứa hẹn sẽ giúp việc quản lý trạng thái trở nên dễ dàng và thú vị.

Jotai là gì?

Jotai , có nghĩa là "nguyên tử" trong tiếng Nhật, cung cấp một cách đơn giản và linh hoạt để quản lý trạng thái trong các ứng dụng React . Nó sử dụng một API tối giản xoay quanh các nguyên tử, giúp quản lý trạng thái vừa trực quan vừa mạnh mẽ. Các nguyên tử là đơn vị trạng thái và các thành phần có thể đọc và ghi vào các nguyên tử này. Không giống như một số thư viện quản lý trạng thái khác, Jotai tận dụng các hook của React và cung cấp một cách chi tiết hơn để quản lý trạng thái.

Tại sao lại là Jotai?

1. Đơn giản và dễ sử dụng : API của Jotai rất đơn giản. Bạn tạo các nguyên tử cho trạng thái của mình và sử dụng các móc để tương tác với chúng. Sự đơn giản này giúp bạn dễ dàng bắt đầu với Jotai và tích hợp nó vào các dự án hiện có.

2. Quản lý trạng thái chi tiết : Với Jotai, bạn có thể tạo các nguyên tử trạng thái cho các phần trạng thái cụ thể, tránh được những cạm bẫy khi có một đối tượng trạng thái đơn khối. Độ chi tiết này dẫn đến hiệu suất tốt hơn và mã dễ bảo trì hơn.

3. Hỗ trợ TypeScript : Jotai hỗ trợ TypeScript tuyệt vời, giúp phát hiện lỗi dễ dàng hơn khi biên dịch và mang lại trải nghiệm tốt hơn cho nhà phát triển.

4. Tích hợp với React : Jotai hoạt động liền mạch với hệ sinh thái của React, bao gồm chế độ đồng thời và kết xuất phía máy chủ. Nó giống như một phần mở rộng tự nhiên của các hook quản lý trạng thái của React.

Bắt đầu với Jotai

Hãy cùng tìm hiểu một số mã để xem việc sử dụng Jotai để quản lý trạng thái dễ dàng như thế nào. Chúng ta sẽ tạo một ứng dụng đơn giản để quản lý bộ đếm, việc tạo tác vụ và danh sách tác vụ.

Thiết lập dự án

Trước tiên, hãy đảm bảo bạn đã thiết lập một dự án React với TypeScript. Nếu chưa, bạn có thể tạo một dự án bằng Create React App:

npx create-react-app jotai-demo --template typescript 
cd jotai-demo

Tiếp theo, cài đặt Jotai:

npm cài đặt jotai

Tạo ra nguyên tử

Atoms là cốt lõi của quản lý trạng thái của Jotai. Chúng đại diện cho các phần trạng thái mà các thành phần có thể đăng ký và cập nhật.

// src/model/atoms.ts 
import { atom } từ  'jotai' ; 

giao diện  Task { 
  tên : chuỗi ; 
} 

export  const countAtom = atom ( 0 ); 
export  const tasksAtom = atom< Task []>([]);

Trong ví dụ này, chúng tôi tạo hai nguyên tử: một cho bộ đếm (countAtom) và một cho danh sách tác vụ (tasksAtom).

Sử dụng nguyên tử trong các thành phần

Bây giờ, chúng ta hãy tạo ra các thành phần tương tác với các nguyên tử này.

// src/Counter.tsx 
import  React  từ  'react' ; 
import { useAtom } từ  'jotai' ; 
import { countAtom } từ  './model/atoms' ; 

export  const  Counter : React . FC = () => { 
  const [count, setCount] = useAtom (countAtom); 

  return ( 
    <div> 
      <h1>Số lượng: {count}</h1> 
      <button onClick={() => setCount(count + 1)}>Tăng</button> 
      <button onClick={() => setCount(count - 1)}>Giảm</button> 
    </div> 
  ); 
};

Trong thành phần Counter, chúng ta sử dụng hook useAtom để đọc và cập nhật countAtom . Hook này cung cấp giá trị hiện tại của atom và một hàm setter để cập nhật giá trị của nó.

// src/CreateTask.tsx 
import  React , { useState } from  'react' ; 
import { useSetAtom } from  'jotai' ; 
import { tasksAtom } from  './model/atoms' ; 

export  const  CreateTask : React . FC = () => { 
  const setTasks = useSetAtom (tasksAtom); 
  const [task, setTask] = useState ( '' ); 

  const  addTask = ( ) => { 
    setTasks ( ( prev ) => [...prev, { 
      name : task, 
    }]); 
    setTask ( '' ); 
  }; 

  return ( 
    <div> 
      <h2>Tạo tác vụ mới</h2> 
      <input 
        type="text" 
        value={task} 
        onChange={(e) => setTask(e.target.value)} 
      /> 
      <button onClick={addTask}>Thêm tác vụ</button> 
    </div> 
  ); 
};

Trong thành phần CreateTask , chúng ta sử dụng useSetAtom để tương tác với tasksAtom — vì chúng ta không phải đọc trạng thái của atom hiện tại, chúng ta chỉ cần sử dụng setter hook — nó đơn giản hóa mã của chúng ta hơn nữa. Chúng ta cũng sử dụng trạng thái cục bộ của React (useState) cho trường đầu vào.

Bây giờ chúng ta hãy tạo một thành phần hiển thị danh sách các tác vụ đã tạo.

// src/TasksList.tsx 
import  React , { useState } từ  'react' ; 
import { useAtomValue } từ  'jotai' ; 
import { tasksAtom } từ  './model/atoms' ; 

export  const  TasksList : React . FC = () => { 
  const tasksList = useAtomValue (tasksAtom); 

  return ( 
    <div> 
      <h2>Danh sách tác vụ</h2> 
      <ul> 
        {tasks.map((task, index) => ( 
          <li key={index}>{task.name}</li> 
        ))} 
      </ul> 
    </div> 
  ); 
};

Trong thành phần TasksList , chúng ta sử dụng useAtomValue để đọc dữ liệu được lưu trữ trong tasksAtom . Vì chúng ta sẽ không thao tác dữ liệu, chúng ta chỉ có thể sử dụng hook getter .

Kết hợp tất cả lại với nhau

Cuối cùng, chúng ta có thể kết hợp các thành phần này lại với nhau trong thành phần Ứng dụng chính.

// src/App.tsx 
import  React  từ  'react' ; 
import { Counter } từ  './Counter' ; 
import { CreateTask } từ  './CreateTask' ; 
import { TasksList } từ  './TasksList' ; 

const  App : React . FC = () => { 
  return ( 
    <div> 
      <Counter /> 
      <CreateTask /> 
      <TasksList /> 
    </div> 
  ); 
}; 

export  default  App ;

Với Jotai, việc quản lý trạng thái trở nên đơn giản và theo mô-đun. Mỗi phần của trạng thái được đóng gói trong nguyên tử riêng của nó, làm cho việc quản lý trạng thái trở nên chi tiết và dễ lý giải.

Những điểm cần nhớ:

• nguyên tử — hàm tạo ra một nguyên tử mới (một phần trạng thái).

• useAtom — một hook cung cấp quyền truy cập vào cả phương thức getter và setter cho một atom.

• useSetAtom — một hook cung cấp quyền truy cập vào phương thức setter cho một atom.

• useAtomValue — một hook cung cấp quyền truy cập vào phương thức lấy dữ liệu cho một nguyên tử.

Bản tóm tắt

Jotai cung cấp một cách tiếp cận mới mẻ và hiệu quả để quản lý trạng thái trong các ứng dụng React. Tính đơn giản, kiểm soát trạng thái chi tiết và tích hợp liền mạch với React và TypeScript khiến nó trở thành lựa chọn tuyệt vời cho các nhà phát triển. Cho dù bạn đang xây dựng một dự án nhỏ hay một ứng dụng phức tạp, Jotai cung cấp các công cụ để quản lý trạng thái của bạn một cách hiệu quả, cho phép bạn tập trung vào việc xây dựng các tính năng thú vị mà không phải đau đầu về quản lý trạng thái phức tạp.

Trong một thế giới mà việc quản lý trạng thái thường có cảm giác như một mớ hỗn độn, Jotai mang lại sự rõ ràng và dễ dàng, khiến nó không chỉ là một công cụ mạnh mẽ mà còn là niềm vui khi sử dụng. Hãy thử Jotai và bạn có thể thấy nó trở thành giải pháp phù hợp cho việc quản lý trạng thái trong React.

Nếu bạn thích bài viết của tôi, đừng quên để lại vài cái vỗ tay 👏🏻 và theo dõi tôi để cập nhật những bài viết tôi đăng 🙂

Tìm hiểu thêm về Jotai: https://jotai.org