Trạng thái (state) của ứng dụng là gì

Cùng lướt qua các ví dụ cho dễ:

Ví dụ 1: Để hình dung đơn giản nhất, trạng thái của ứng dụng tương tự như cái nút Lui (Back)/Tới (Forward) lịch sử của trình duyệt của trình duyệt web. Bạn mở web nhấn vào vòng vòng một hồi, rồi nhấn quay lại các trang trước, mỗi trang như vậy còn được gọi là trạng thái. Nhưng, với các ứng dụng SPA (Single Page Application) thì chuyện Lui/Tới cũng là cả vấn đề rồi.

Ví dụ 2: Không liên quan đến web nhưng rất điển hình đó là trạng thái của bàn cờ tướng hay cờ vua chẳng hạn. Mỗi khi người chơi đi một nước – trong thi đấu – họ phải ghi lại từng nước đi, bằng cách này sau khi chơi xong người ta có thể tái hiện lại bàn cờ một cách dễ dàng. Ứng với mỗi nước đi, đó chính là trạng thái của bàn cờ.

Vậy thì nó liên quan gì đến trạng thái của ứng dụng?

Một ứng dụng web hoạt động cần dữ liệu từ phía máy chủ, thao tác của người dùng,…tổng hợp các thứ này lại ta được trạng thái của ứng dụng. Nếu biết trạng thái này, có nghĩa là tại thời điểm X ta biết được máy chủ đã trả về dữ liệu gì, người dùng đã thao tác những gì, nhập vào dữ liệu gì.

Việc biết trạng thái này có quan trọng không?

Các ứng dụng web hiện nay ngày càng phức tạp, việc biết được trạng thái này giúp cho công việc kiểm soát lỗi dễ dàng hơn, nhất là nó làm cho cách chúng ta lập trình cũng đơn giản hơn. Ví dụ, nếu bạn có một biểu mẫu mua hàng, giả sử có 5 bước: xác nhận đơn hàng, áp dụng mã khuyến mãi, điền thông tin giao hàng, thanh toán, hoàn tất. Với một ứng dụng web thông thường, nếu xảy ra lỗi ở bước 4, lập trình viên sẽ kiểm tra lại và nhập dữ liệu từ 1->4, tìm lỗi sau đó sửa lỗi, công đoạn này lặp đi lặp lại n lần!!! Nếu sử dụng Redux, mỗi công đoạn xem như một trạng thái và bạn không cần phải lặp lại bước 1->4 nữa.

Các nguyên tắc cơ bản của Redux

Nguồn dữ liệu tin cậy duy nhất

Như mình đã giới thiệu cơ bản ở trên, trong quá trình hoạt động của ứng dụng, bị phụ thuộc khá nhiều yếu tố: dữ liệu từ máy chủ ban đầu, thao tác của người dùng (nhập dữ liệu, click menu, button…), dữ liệu cập nhật từ máy chủ, dữ liệu được tính toán trong ứng dụng (Ví dụ: tính toán số dư tài khoản dựa trên biến động của tỉ giá)…những yếu tố này còn gọi là nguồn dữ liệu. Những nguồn dữ liệu này đến từ những nơi khác nhau, bất kỳ khi nào, khiến cho ứng dụng của chúng ta rất khó kiểm soát, chúng tác động đến những thành phần đơn lẻ, hoặc nhiều thành phần trên ứng dụng, hoặc hiệu ứng dây chuyền. Chính vì sự phức tạp đó, là vấn đề mà Redux muốn giải quyết, tất cả các nguồn dữ liệu cần phải được quản lý và tạo thành một nguồn duy nhất, tin cậy.

Trạng thái là chỉ được phép đọc (read-only)

Trạng thái của ứng dụng không được phép thay đổi “trực tiếp”, trạng thái cũng chỉ là một đối tượng thôi mà, nên việc thay đổi là được. Tuy nhiên, với Redux hay Flux thì trạng thái chỉ thay đổi khi và chỉ khi có một sự kiện xảy ra, giống như ra trận thì chỉ được phép nghe lời từ chỉ huy, mọi tin tức tình báo đều được gởi tới chỉ huy, nếu không có lệnh từ chỉ huy thì tất cả không được phép manh động.

Thay đổi chỉ bằng hàm thuần tuý

Điều may mắn là việc sử dụng Redux js là không quá khó, việc thay đổi trạng thái của ứng dụng, được thực hiện thông qua các hàm thuần tuý. Đưa vào giá trị sự kiện, trạng thái hiện tại và hàm trả về trạng thái tiếp theo. Dù tương lai ứng dụng của bạn có thể rất lớn, nhưng các hàm reducer này thì chỉ cần nhỏ gọn thay đổi trên từng lá của cây trạng thái, và chúng hoàn toàn có thể kết hợp với nhau tạo thành chuỗi sự kiện. Ví dụ: người click vào menu (một sự kiện => thay đổi trạng thái), sau đó router cũng cần thay đổi để phù hợp với ngữ cảnh.

Tính ứng dụng của Redux js là gì

Theo mình thấy Redux có 3 ứng dụng quan trọng nhất:

• Quản lý trạng thái: như một bản replay có thể undo/redo trạng thái của ứng dụng, phải nói là “Không thể tin được”, cá nhân mình rất thích tính tin cậy của ứng dụng mà Redux mang lại.
• Tăng tốc phát triển: với webpack đã có Hot Module Replacement, khi kết hợp với Redux, tạo thành sự kết hợp ăn ý, bạn có thể viết code và debug rất dễ dàng, hãy quay lại ví dụ về biểu mẫu mua hàng 5 bước ở trên, nếu bạn không áp dụng Redux, đồng nghĩa bạn phải debug lặp đi lặp lại việc nhập dữ liệu, mà chưa chắc lỗi do code gây ra mà do dữ liệu nhập vào.
• Ứng dụng offline: tất cả các thao tác của người dùng được lưu vào một cây trạng thái, khi có kết nối Internet, cây này sẽ được đồng bộ lên server bởi một loạt các sự kiện.

Sự khác biệt giữa Redux và Flux

Redux phát triển dựa trên Flux, nhưng đã lượt bỏ phần Dispatcher, và chỉ có duy nhất 1 store, …blah …blah, thôi nói nghe này: “Quên Flux đi“.
Nếu bạn chưa bao giờ nghe đến Flux hay Redux, thì đừng mất thời gian để tìm hiểu: Flux là gì, Flux khác Redux như thế nào, điểm yếu của Redux js là gì? Mình cũng đã từng mất thời gian như vậy, nhưng bây giờ mình tin chỉ cần nghiên cứu Redux là đủ. Đây là các lý do để chỉ nghiên cứu “Redux js là gì“:

• Hiện tại Redux đã đạt ~20k stars Github khi chưa đầy 1 năm
• Ứng dụng F8 của Facebook không sử dụng Flux mà sử dụng Redux:
• Dan Abramov, người tạo ra Redux đã gia nhập Facebook từ tháng 11/2015

Kết

Mình hi vọng qua bài “Redux js là gì” này, mình đã truyền tình yêu của mình dành cho Redux đến bạn. Cái hay của Redux là nó không phụ thuộc vào việc bạn sử dụng framework nào, nó là kiến trúc giúp cho ứng dụng phát triển nhanh, đáng tin cậy, và dễ hiểu khi làm việc nhóm. Cách người ta ghi lại nước cờ, làm cho tất cả mọi người đều dễ dàng hiểu và trình bày lại bàn cờ ra sao, thì Redux cũng như vậy!

The post Redux js là gì appeared first on Fullstack Station.

Phần 1: Bài toán

Nếu bạn chưa sử dụng Flux cho dự án của mình, và có một vài vấn đề khó khăn liên quan đến việc giao tiếp giữa các components có quan hệ cha – con: component con muốn cập nhật dữ liệu cho component cha hoặc ông nội, ông cố… hoặc truyền dữ liệu thông qua props từ components ông cố -> ông nội -> cha -> con …thì bạn có thể sử dụng context để khắc phục vấn đề trên.

Context là một khái niệm thuộc phần nâng cao và đang trong quá trình thử nghiệm của React Js. Mặc dù API được khuyến cáo là có thể thay đổi, tuy nhiên với những xử lý Form phức tạp (có nhiều component con lồng nhau) thì mình nhận thấy dùng context khá dễ dàng và tiện lợi hơn so với Flux.

Context: https://facebook.github.io/react/docs/context.html

Ở tài liệu trên của Facebook, đã nói đến khía cạnh truyền dữ liệu từ Cha -> Con không thông qua props, bài viết này, mình giới thiệu với các bạn cách cập nhật dữ liệu cho component ông cố từ component con

Nếu bạn đã có khái niệm hiểu Flux là gì rồi, thì có thể tưởng tượng thay vì Store nằm ở một đối tượng khác – một nơi nào đó thì context tương tự store nằm trong Component ông cố, và khi khởi tạo component con sẽ lấy được dữ liệu từ Component ông cố thông qua Props, và mọi Action từ component con sẽ cập nhật component cố nội.

Giao diện

Xét Form sau: Để đơn giản, mình chỉ vẽ 3 cấp (ông nội – cha – con), còn component level 4, 5 sử dụng modal, xử lý dữ liệu và trả về cho component level 3 không hiển thị ở đây.

Cơ sở dữ liệu

Tương ứng dữ liệu trong MongoDB có thể như sau:

{
  "title": "Good places near your house",
  "description": "Hospital, Supermarket, Kindergarden, Stadium...",
  "places": [
      { 
          "location": {
              "type": "Point",
              "coordinates": [1234, 4567]
           },
           "imageId": "feYddeqw12jx",
           "recommends": [
              "Open 10:00 - 19:00", "Good services"
           ]
      },
      {...},
      ....
   ]
  
}

Sử dụng MongoDB với embedded document thường sẽ làm cho React có cấu trúc component như trên – khá phức tạp đúng không? Nếu bạn sử dụng chung nguyên bộ React – Relay – GraphQL thì vấn đề trên chắc sẽ giải quyết gọn hơn, hoặc Flux/Redux.

Tuy nhiên, mình đã áp dụng Context trong dự án thực tế để giải quyết vấn đề trên, với form khá phức tạp ở các components, nhất là trong component level 2:

• Map (component level 3): sử dụng Component Modal level 4 để chọn location
• Image (component level 3) sử dụng Component Modal level 4 để dùng Google Custom Search chọn hình ảnh
• Recommends (component level 3): mỗi component đều có nút xoá

Tất cả các dữ liệu component đều lưu trong 1 state thuộc component level 1, các component con ứng với mỗi action sẽ cập nhật state này (setState), state thay đổi kích hoạt render lại toàn bộ component con (chỉ những phần thay đổi).

Sơ đồ trao đổi dữ liệu

(Làm biếng vẽ hình quá, xem thô tạm nha)

———–Database (API)

————–↑          ↓

(Autosave)  ↑          ↓   (Reactive)

————–↑          ↓

(State) Component Cha → Props→(Render) Component con →Action

↑                                                                                                                        ↓

↑                                                                                                                        ↓

←———————-Context——————————————–←

Mô hình sử dụng context này, không những giúp cho component con có tính tái sử dụng, mà còn giúp cho ta tạo ra một ánh xạ document của MongoDB, việc Save document này sau đó khá là dễ dàng. Component Root có nhiệm vụ giao tiếp với Database và truyền props xuống các component con, mỗi khi có action từ component, ta cập nhật state cho component ông và có thể kích hoạt autosave lưu vào database. Nếu trong ứng dụng realtime, 2-n người tương tác với nhau thì Database sẽ reactive dữ liệu xuống, trong ứng dụng thực tế, mình sử dụng React – Meteor đã có sẵn tính năng reactive từ database.

Phần 1 đến đây là kết thúc, phần 2 mình sẽ trình bày cách lập trình để sử dụng context xử lý component con cấp n cập nhật dữ liệu cho component root.

The post Sử dụng context để giao tiếp giữa component cha – con trong ReactJs appeared first on Fullstack Station.