MMA301 - Chương 6: Quản lý trạng thái, Hook và Redux

Khi chúng ta sử dụng Redux trong ứng dụng React Native, chúng ta cần hiểu cách hoạt động của các reducer và hành động. Trong trường hợp này, chúng ta có một reducer tên là counterReducer và một hành động tên là increment. Khi chúng ta gọi hành động increment, nó sẽ gửi một yêu cầu đến reducer để cập nhật trạng thái ứng dụng. Trong reducer, chúng ta sử dụng một switch để kiểm tra loại hành động được gửi đến. Nếu hành động là 'INCREMENT', chúng ta sẽ cập nhật giá trị của count bằng cách thêm 1 vào giá trị hiện tại. Nếu hành động không phải là 'INCREMENT', chúng ta sẽ giữ nguyên trạng thái hiện tại. Vì vậy, khi chúng ta gọi hành động increment, trạng thái ứng dụng sẽ được cập nhật thành { count: 1 }.

Khi sử dụng React Native, có hai phương thức quản lý trạng thái quan trọng là useReducer và useState. useReducer được thiết kế để quản lý trạng thái phức tạp và các chuyển đổi trạng thái, trong khi useState phù hợp cho việc quản lý trạng thái đơn giản. Điều này có nghĩa là useReducer có thể xử lý các trạng thái phức tạp hơn, chẳng hạn như các trạng thái phụ thuộc vào nhau, trong khi useState chỉ phù hợp cho các trường hợp đơn giản. Ví dụ, nếu bạn cần quản lý một trạng thái có nhiều thuộc tính và các quy tắc phức tạp để chuyển đổi trạng thái, thì useReducer sẽ là lựa chọn tốt hơn. Ngược lại, nếu bạn chỉ cần quản lý một trạng thái đơn giản, chẳng hạn như một checkbox hoặc một input text, thì useState sẽ đủ.

Để quản lý dữ liệu trong một ứng dụng React Native, có nhiều phương pháp khác nhau. Trong số các lựa chọn trên, "Storage" không phải là một phương pháp quản lý dữ liệu. "useReducer", "Redux", và "MobX" là các thư viện phổ biến được sử dụng để quản lý trạng thái trong ứng dụng React Native. "useReducer" là một hook trong React giúp quản lý trạng thái bằng cách sử dụng một hàm giảm giá. "Redux" là một thư viện quản lý trạng thái tập trung, giúp phân chia ứng dụng thành các phần nhỏ hơn và dễ quản lý hơn. "MobX" là một thư viện quản lý trạng thái dựa trên phản ứng, giúp ứng dụng phản ứng với các thay đổi trong dữ liệu. Ngược lại, "Storage" là một phương pháp lưu trữ dữ liệu, chẳng hạn như bộ nhớ đệm hoặc cơ sở dữ liệu, mà không liên quan trực tiếp đến việc quản lý trạng thái trong ứng dụng.

Trạng thái (state) trong React là một đối tượng JavaScript chứa dữ liệu ảnh hưởng đến cách một thành phần được trình bày trong một khu vực cụ thể tại một thời điểm. Nó được sử dụng để lưu trữ và cập nhật dữ liệu của thành phần, và có thể được sử dụng để điều khiển sự kiện và hành vi của thành phần. Trạng thái được sử dụng để lưu trữ dữ liệu tạm thời và không được lưu trữ trong bộ nhớ cache. Nó được sử dụng rộng rãi trong các ứng dụng React để quản lý dữ liệu và trạng thái của thành phần.

Để khởi tạo trạng thái của một TextInput sử dụng useState hook, bạn cần sử dụng cú pháp sau: const [value, setValue] = useState('');. Trong đó, 'value' là giá trị hiện tại của TextInput, còn 'setValue' là hàm được sử dụng để cập nhật giá trị của TextInput. Bạn có thể khởi tạo giá trị ban đầu của TextInput bằng cách thêm giá trị vào trong useState(). Ví dụ, nếu bạn muốn khởi tạo giá trị ban đầu của TextInput là 'Initial Value', bạn có thể sử dụng cú pháp: const [value, setValue] = useState('Initial Value');. Tuy nhiên, nếu bạn không thêm giá trị vào trong useState(), thì giá trị ban đầu của TextInput sẽ là null hoặc undefined.

Để áp dụng useReducer vào việc quản lý logic trạng thái phức tạp trong ứng dụng React Native, bạn cần hiểu rõ về cách sử dụng hook này. useReducer cho phép bạn tạo một hàm giảm (reducer) tùy chỉnh và thực hiện các hành động (actions) để cập nhật trạng thái. Bằng cách sử dụng useReducer, bạn có thể tách rời logic trạng thái phức tạp thành các phần nhỏ hơn và dễ quản lý hơn. Điều này giúp bạn dễ dàng theo dõi và debug trạng thái ứng dụng. Ngoài ra, useReducer cũng cho phép bạn sử dụng các hành động (actions) để cập nhật trạng thái, giúp bạn có thể dễ dàng quản lý trạng thái ứng dụng trong thời gian dài.

Trong React, có một số cách để quản lý dữ liệu trong các thành phần. Một trong số đó là sử dụng Hook. Hook là một hàm đặc biệt trong React cho phép bạn sử dụng trạng thái và các tính năng khác mà không cần phải chuyển sang lớp. Một trong những Hook phổ biến nhất để quản lý dữ liệu là useReducer. useReducer cho phép bạn quản lý trạng thái phức tạp bằng cách sử dụng một hàm giảm giá trị. Nó cũng cho phép bạn quản lý các hành động và trạng thái của ứng dụng một cách dễ dàng. Ngoài ra, bạn cũng có thể sử dụng Redux, MobX và Realm để quản lý dữ liệu, nhưng chúng khác nhau về cách thức và mức độ phức tạp.