Redux tutorial: Part 1 - Giới thiệu Redux thư viện quản lý state trong project.

hoangbp -

Tổng quan về Redux.

1. Redux là gì? Cấu trúc và cách hoạt động của Redux?

2. Khi nào cần sử dụng Redux?

1. Redux là gì? Cấu trúc và cách hoạt động của Redux?

Redux là một kiến trúc unidirectional Data Flow được xây dựng dựa trên nền tảng tảng tư tưởng của kiến trúc Flux do Facebook giới thiệu mục tiêu là giúp tạo ra một lớp quản lý trạng thái(State) của ứng dụng.

Cấu trúc và cách hoạt động của Redux

Redux có 4 thành phần như sau:######

Actions :

  • Actions đơn giản là các events. Chúng là cách mà chúng ta send data từ app đến Redux store. Những data này có thể là từ sự tương tác của user vs app, API calls hoặc cũng có thể là từ form submission.
  • Actions gồm 2 phần là type (kiểu mô tả action), và giá trị tham số truyền lên:


Reducers :

  • là các pure function chúng lấy state hiện tại của app, thực hiện một action và trả về một state mới. Những states này được lưu như những objects và chúng định rõ cách state của một ứng dụng thay đổi trong việc phản hồi một action được gửi đến store.

ví dụ về reducers:

Store

  • store là 1 object lưu trữ tất cả state của ứng dụng, cho phép truy cập state qua getState(), update state qua dispatch(action), đăng kí listener qua subscribe(listener).

Cách hoạt đông của Redux như sau :

1. Khi có 1 event được dispatch từ View, sẽ tạo ra một Action mô tả về event đó.

2. Action sẽ được gửi đến Reducer xử lý.

3. Reducer sẽ nhận Action và dưạ vào các mô tả của Action để tạo ra một State mới và lưu tại Store.

4. Các ViewController đã được subcriber đến Store sẽ nhận được sự thay đổi và tiến hành update UI.

Nguyên lý của Redux là:

  • Single source of truth: State của toàn bộ ứng dụng được lưu trong 1 object duy nhất là Store.
  • State is read-only: Để thay đổi state cách duy nhât là thông qua các Action( là một object mô tả những gì chúng ta muốn thực hiện ).
  • Changes are made with pure functions: Để thay đổi trạng thái của ứng dụng bởi mỗi một action, chúng ta sử dung Reducer. Reducer là một pure function, việc sử dụng pure function để đảm bảo tính imutable của dữ liệu.

2. Khi nào cần sử dụng Redux?

  • Khi bạn có một cấu trúc các thành phần dữ liệu được luân chuyển xuống nhiều tầng.
  • Khi bạn cần lưu cache dữ liệu giữa các view.
  • Nếu ứng dụng đang lớn lên, quản lí nhiều dữ liệu

Bài viết tiếp theo mình sẽ hướng dẫn tích hợp Redux vào React Native. Cảm ơn các bạn đã theo dõi bài viết.

Tham khảo thêm tại: https://redux.js.org/introduction/getting-started