Nghệ thuật Flutter : Quản lý State với Redux

Quản lý state với Redux là một cách rất phổ biến đối với các ứng dụng viết bằng JavaScript và trong Flutter nó cũng được sử dụng.

Redux là gì ?

“Redux is a predictable state container for JavaScript apps”

Redux giống như một công cụ để quản lý trạng thái ( State management ).
Nó giúp ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khác nhau(client, server, native) dễ dàng để test, debug.

Nhìn sơ qua thì có thể thấy, cách quản lý state này cũng khá giống với InheritedWidget hoặc Provider đúng không ? Vậy chúng ta cùng đi chi tiết nhé 🙂

Cấu tạo và nguyên lý làm việc của Redux

Redux có 3 phần chính:

1. Store

Là một đối tượng, có nhiều cặp khoá ( key-value) đại diện cho trạng thái hiện tại của ứng dụng.
Store cung cấp trạng thái ứng dụng, mỗi khi trạng thái cập nhật, view được tải lại.

2. Action
Là một đối tượng, gửi thông tin từ ứng dụng lên Store và là nguồn thông tin duy nhất lên Store

3.Reducer
Một action mô tả vấn đề, reducer chịu trách nhiệm giải quyết vấn đề.

Ví dụ

Tạo một project mới

Khai báo thư viện:

Trong file main.dart:

Kết quả:

Giải thích:

Các bước để thực hiện :
– Tạo Action

– Tạo hàm Reducer

– Khởi tạo Store để giao tiếp với App

– Liên kết Store với App
+ Dùng StoreProvider để liên kết App với Store đã khai báo bên trên

+ Dùng StoreConnector để hỗ trợ hiển thị khi nhận được Action và hiển thị.

+ Dùng để tương tác với Action

Qua ví dụ đơn giản trên các bạn có thể hiểu căn bản về Redux trong Flutter. Hy vọng bạn có nhiều kiến thức từ team Báo Flutter.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *