Khám phá quản lý trạng thái trong React bằng Jotai: Hướng dẫn thực hành

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

Để bắt đầu, hãy tạo một ứng dụng React. Ngoài ra, bạn có thể sử dụng Vite để thiết lập dự án React. Sau khi bạn xây dựng một ứng dụng React cơ bản, hãy tiếp tục và cài đặt Jotai trong ứng dụng của bạn.

 npm install jotai 

Tiếp theo, để sử dụng Jotai trong ứng dụng của bạn, bạn cần bọc toàn bộ ứng dụng của mình bằng Các nhà cung cấp thành phần. Thành phần này chứa cửa hàng đóng vai trò là trung tâm trung tâm để cung cấp các giá trị nguyên tử trong toàn bộ ứng dụng.

Ngoài ra, nó cho phép bạn khai báo trạng thái ban đầu của các nguyên tử. Bằng cách gói ứng dụng của bạn với Các nhà cung cấptất cả các thành phần trong ứng dụng đều có quyền truy cập vào các nguyên tử mà bạn đã xác định và sau đó, chúng có thể tương tác và cập nhật trạng thái thông qua sử dụngAtom cái móc.

 import { Provider } from "jotai"; 

Bây giờ bọc ứng dụng trong index.js hoặc chính.jsx như hì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>,
) 

Định cấu hình kho lưu trữ dữ liệu

Cửa hàng hoạt động như một kho lưu trữ trung tâm cho trạng thái của ứng dụng. Nó thường chứa định nghĩa về các nguyên tử, bộ chọn và bất kỳ chức năng liên quan nào khác được yêu cầu để quản lý trạng thái bằng Jotai.

Trong trường hợp này, nó quản lý các nguyên tử để quản lý danh sách các mục cho ứng dụng Việc cần làm. bên trong src thư mục, tạo TodoStore.jsx tệp và thêm mã bên dưới.

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

Bằng cách tạo và xuất các TodosAtombạn có thể thoải mái tương tác và cập nhật trạng thái việc 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

Bây giờ bạn đã định cấu hình Jotai trong ứng dụng React và tạo một nguyên tử để quản lý trạng thái của ứng dụng, hãy tiếp tục và tạo một thành phần công việc đơn giản sẽ xử lý các chức năng thêm, xóa và chỉnh sửa cho các mục công việc.

Tạo một cái mới thành phần/Todo.jsx tập tin trong src danh mục. Trong tệp này, thêm mã dưới đây:

1. Nhập kho lưu trữ dữ liệu và sử dụngAtom cái móc.

    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 phầ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 thị giao diện người dùng đơn giản để quản lý danh sách các mục việc cần làm.

3. Cuối cùng, thực hiện các chức năng thêm và xóa việ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));
     }; 

Các xử lýThêm chức năng chịu trách nhiệm thêm một mục việc cần làm mới vào danh sách các mục. Đầu tiên, nó kiểm tra xem giá trị của biến có trống không. Sau đó, nó tạo một mục việc cần làm mới với một ID duy nhất và mục việc cần làm đã nhập làm nội dung của nó.

Các setTodos sau đó, chức năng được gọi để cập nhật danh sách các mục việc cần làm trong nguyên tử bằng cách nối thêm mục mới. Cuối cùng, giá trị trạng thái được đặt lại thành một chuỗi trống sau thao tác bổ sung.

Mặt khác, các xử lýXóa chức năng chịu trách nhiệm xóa một mục việc cần làm khỏi danh sách. Nó lọc ra mục việc cần làm bằng cách sử dụng ID đã chỉ định từ danh sách hiện có bằng cách sử dụng trướcTodos.filter phương pháp. Sau đó, nó cập nhật danh sách bằng cách sử dụng setTodos chức năng—xóa mục việc cần làm đã chỉ định khỏi danh sách một cách hiệu quả.

Sử dụng Jotai để quản lý trạng thái trong ứng dụng React

Hướng dẫn này đã giới thiệu về cách sử dụng Jotai như một giải pháp quản lý nhà nước. Tuy nhiên, có những tính năng tuyệt vời khác như khả năng tạo các nguyên tử không đồng bộ được thiết kế đặc biệt để quản lý trạng thái liên quan đến các hoạt động không đồng bộ như lệnh gọi API.

Ngoài ra, bạn cũng có thể tạo các nguyên tử dẫn xuất, được sử dụng để tính toán và lấy các giá trị từ các nguyên tử hiện có, cho phép bạn quản lý các trạng thái phức tạp dựa trên các phần khác của ứng dụng.

Bằng cách tận dụng các tính năng quản lý trạng thái này, bạn có thể tạo các ứng dụng React mạnh mẽ hơn và có khả năng mở rộng hơn.