Flux vs Redux

Flux vs Redux

- 3 mins

Flux và Redux là 2 cái tên không xa lạ gì với cộng đồng React, chúng được sử dụng trong hầu hết các app JS. Dưới đây là một số ý chính về 2 kiến trúc này:

Hầu hết các bug khó giải quyết nhất đều có liên quan tới “state changing”. Đây là cái mà các devs nhà ta hay lầm bầm “hẳn là biến này tới đây phải là xyz nhưng sao bây giờ nó lại là xxx, phải một nơi nào đó đã thay đổi nó”. Lúc này chúng ta phải đi tìm cái “nơi nào đó” và đảm bảo không có “nơi nào khác” gây lỗi tương tự là điều rất mất thời gian. Nên nhớ là nếu chúng ta tìm được nơi gây ra bug, chúng ta đã fix được bug đó 90% rồi.

Chính vì thế kiến trúc ứng Flux tập trung giải quyết vấn đề trên rất hiệu quả. Tuy nhiên Flux chỉ được FB giới thiệu như 1 kiến trúc tổng quát ngoài ra họ không cung cấp cách implement chi tiết nên ở ngoài cộng đồng có rất nhiều phiên bản implement lại. Nổi tiếng nhất trong đó chính là Redux.

Flux là gì:

Flux là một kiến trúc ứng dụng, ý tưởng của nó được giới thiệu lần đầu bởi Bill Fisher và Jing Chen tại FB F8 2014. Ý tưởng này tái định nghĩa lại mô hình MVVM vốn đã được sử dụng rộng rãi trước đó với khái niệm dòng chảy dữ liệu đơn hướng (unidirectional data flow).

Các sự kiện (actions/events) trong Flux sẽ đi qua một “mạch khép kín” có dạng như sau: USER INTERFACE — action —> DISPATCHER — action —> STORES — notify changes —> USER INTERFACE

Flux Overview

Trong đó action là cấu trúc dữ liệu mô tả bất kỳ một action (click chuột, bàn phím, tương tác chạm màn hình …). DISPATCHER là một điểm duy nhất trong app tiếp nhận các actions cần handle. STORES sẽ lắng nghe các actions và quản lý các state trong toàn ứng dụng. STORES dựa vào action để phản hồi tới các USER INTERFACE tương ứng.

Nên nhớ actions là các cấu trúc dữ liệu chúng ta định ra nên ta sẽ biết được chi tiết các action này: diễn ra tại đâu, vào lúc nào, thay đổi state nào…

Redux là gì:

Redux như đã nói ở trên là một phiên bản implement từ Flux. Tuy nhiên Redux có một số khác biệt: Redux chỉ có 1 store duy nhất thay vì nhiều stores, STORE này sẽ không chứa các logic code. Các actions sẽ được tiếp nhận và xử lý trực tiếp bởi STORE. STORE cũng sẽ gởi các actions tới các “state-changing functions” gọi là REDUCERS (thay vì DISPATCHER như Flux).

Ngoài ra trong Redux chúng ta có thể add thêm các MIDDLEWARE layers vào REDUCERS để xử lý các actions. Các lớp trung gian này sẽ thực hiện các công việc thêm cho các actions ví dụ: chứng thực người dùng, đảm bảo người dùng có đủ quyền để thực hiện action. Vì thế middleware có thể dừng action lại hoặc cho phép action thông qua và kể cả thay đổi action.

Redux Overview

Điều làm cho Redux trở nên đặc biệt đó là REDUCER không bao giờ thay đổi state hiện tại của App. Thay vào đó nó sẽ copy và trả về một state mới. Hướng tiếp cận này thường thấy trong các ngôn ngữ hiện đại và thường được gọi là “Immutable state”.

Tóm lại Flux và Redux là kiến trúc ứng dụng để quản lý state trong ứng dụng hiệu quả hơn. Flux là ý tưởng, kiến trúc tổng quát còn Redux là version implement từ Flux nên sẽ chi tiết hơn và sử dụng immutable state thay vì mutable state. Chính vì điều này nên chúng ta sẽ thấy Redux khá phổ biến hơn là Flux.

** Một số hình ảnh trong bài mình lấy từ quyển sách “The complete Redux book”, đây thực sự là quyển sách hay và hoàn thiện nhất về Redux mà mình từng biết.

Viet Tran

Viet Tran

A Man who is developing apps with Red Bull

comments powered by Disqus
rss facebook twitter github youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora