- View-Model: chịu trách nhiệm hiển thị các phương thức, lệnh và các thuộc tính khác giúp duy trì trạng thái của chế độ xem, thao tác mơ hình do kết quả của các hành động trên chế độ xem và kích hoạt các sự kiện trong chính chế độ xem. Chế độ xem có tham chiếu đến View-Model nhưng View-Model khơng có thơng tin về View. Có mối quan hệ nhiều-một giữa View và View-Model có nghĩa là nhiều View có thể được ánh xạ tới một View-Model. Nó hồn tồn độc lập với View. - Liên kết dữ liệu hai chiều hoặc liên kết dữ liệu hai chiều giữa Vỉew và View-Model
đảm bảo rằng các mơ hình và thuộc tính trong View-Model đồng bộ với chế độ xem. Mơ hình MVVM rất phù hợp trong các ứng dụng cần hỗ trợ ràng buộc dữ liệu hai chiều.
Nguyễn Tiến Hải – D17CQVT08B 36
3.2.1.4. Quản lý trạng thái trong ứng dụng (State Managerment)
Quản lý State hay trạng thái trong lập trình ứng dụng là một phần cực kỳ quan trọng. Các trạng thái sẽ giúp lập trình viên định nghĩa, xử lý dựa trên những hành động mà người dùng đưa ra.
Trong React Native, việc quản lý State sẽ được quản lý bằng nhiều cách, trong đó có 2 cách phổ biến nhất:
- Quản lý State trong mỗi màn hình sử dụng hàm useState của React - Quản lý State xuyên suốt ứng dụng với Redux
3.2.1.4.1. useState:
useState là 1 hàm thuộc React Hooks cho phép lập trình viên sử dụng để khởi tạo, quản lý các State trong một Component một cách hiệu quả.
Ví dụ đơn giản nhất của useState:
const [state, setState] = useState(initialStateValue)
Như trên chúng ta có thể hiểu:
- state: định nghĩa tên của state nó có thể là đơn giá trị hoặc object,.. (là tham số của useState)
- setState: định nghĩa tên function dùng cho việc update state (là thamg số của useState)
- initialStateValue: là giá trị ban đầu của state. Ví dụ:
() => {
const [count, setCount] = useState(0) const handleClick = () => setCount(age + 1)
return ( <div>
Current count {count}. <div>
<button onClick={handleClick}>Increment Count!</button> </div>
</div> ) }
Như ví dụ thì ta thấy ban đầu khởi tạo state có tên là count với giá trị ban đầu là 0. Thì count ở đây là state name và là tham số đầu tiên của hàm useState và tham số thứ 2 sẽ hàm function setCount hàm xử lý khi mỗi lần ta nhấn click thì giá trị của state sẽ được tăng lên một. Cơng việc xử lý tăng lên 1 nó tương đương với hàm setState trong Class Components.
Nguyễn Tiến Hải – D17CQVT08B 37
3.2.1.4.2. Sử dụng thư viện Redux
Redux là một thư viện cho phép quản lý State xuyên suốt toàn bộ thời gian sử dụng ứng dụng của người dùng, nó cho phép việc quản lý, xử lý các nội dung người dùng đã xử lý trong thời gian sử dụng ứng dụng, giúp người dùng có một trải nghiệm xuyên suốt trong quá trình sử dụng ứng dụng. Với Redux, trạng thái ứng dụng của được giữ trong một "store" và mỗi thành phần có thể truy cập bất kỳ trạng thái nào mà nó cần từ "store"này.Cách Redux hoạt động rất đơn giản. Có một "store" trung tâm chứa tồn bộ trạng thái của ứng dụng. Mỗi thành phần có thể truy cập trạng thái được lưu trữ mà không phải gửi từ thành phần này sang thành phần khác.