Mobx (Phần 1) – Giới thiệu

Xin chào các bạn, chắc hẳn các bạn developer đã từng nghe tới các thư viện để quản lý State trong dự án như Redux, Mobx . Vậy chúng là gì ? Hôm nay mình xin giới thiệu với các bạn về Mobx. Thông thường khi bạn muốn giỏi, muốn hiểu sâu về bất kỳ một cái gì đó, bạn phải trả lời được 3 câu hỏi : Nó là gì, sử dụng nó như thế nào và khi nào dùng nó ? Hôm nay mình sẽ giúp các bạn hiểu được Mobx là gì, tại sao rất nhiều người dùng nó, ưu điểm nhược điểm của nó là gì, để các bạn có thể ứng dụng các các dự án cá nhân hoặc công ty của các bạn.

1: Mobx là gì ?
– Trong bất kỳ ứng dụng nào luôn bao gồm rất nhiều các component, trong mỗi component lại có state của nó. Thông thường các bạn hay sử dụng this.setState({}) để thay đổi State của component và dùng this.state để lấy ra state của nó. Về cơ bản các bạn chỉ cần lắm vững state trong component là có thể làm ứng dụng ngon lành cành đào rồi . Tuy nhiên khi ứng dụng của bạn mở rộng, các chức năng phình to ra, nhiều component phải chia sẻ state với các các component khác thì rất khó cho chúng ta có thể quản lý state một cách hiệu quả. Nhất là trong một team có nhiều member, mỗi ông code một kiểu , cuối cùng nó trở thành một đống hổ lốn mà mỗi khi maintain hay đọc lại code, các bạn lại cảm thấy muốn cầm một con dao, để đi đâu, đi gọt hoa quả chứ đi đâu (^_^) ( đùa các bạn chút thôi) . Đó là lý do chúng ta cần một thư viện, một công cụ để nhất quán trong việc quản lý state đó các bạn , đó chính là Mobx

– Vậy Mobx là gì ?
Mobx là một thư viện dùng để quản lý state trong các ứng dụng Javascript. Nó không nhất thiết phải đi kèm với một thư viện như React, bạn hoàn toàn có thể sử dụng nó với các thư viện khác như AngularJs hay VueJs.

2: So sánh Mobx và Redux
– Về cơ bản Mobx và Redux đều là các thư viện dùng để quản lý state trong các ứng dụng Javascript. Nếu bạn dùng một thư viện quản lý state, bạn sẽ không bị ràng buộc bởi nó. Bạn hoàn toàn có thể chuyển từ Redux sang Mobx và ngược lại
– Tiếp đến chúng ta đến với những điểm khác nhau giữa Mobx và Redux
+ Dễ học dễ sử dụng: đối với người mới bắt đầu, bạn có thể học cách sử dụng Mobx chỉ trong 30 phút. Một khi học những thứ cơ bản, bạn không cần phải học thêm điều gì mới. Với Redux thì khác, một khi ứng dụng phức tạp hơn, bạn phải giải quyết : xử lý hành động async với redux-thunk, đơn giản hoá mã của bạn với redux-saga …
+ Ít mã code hơn: Trong Mobx bạn chỉ cần quan tâm đến component và Store. Còn trong Redux thì nhiều thứ hơn component, reducer, store , rỗi mỗi lần thay đổi state bạn phải qua action lằng nhằng một đống
+ Mobx hỗ trợ đầy đủ cho lập trình hướng đối tượng, nếu như bạn đã từng code Java hay Android như mình chẳng hạn, dùng thằng này sẽ khá thích. Cơ bản mình thấy nó giống mô hình MVVM bên mobile native. Redux thì kiểu lập trình hướng chức năng, nhiều bạn đang quen với lập trình hướng đối tượng sẽ không quen với kiểu này, tuy nhiên bạn nên học và làm quen nó nhé, không là bạn sẽ bị tụt hậu đó. Đã là developer thì kiểu gì cũng phải chơi được
+ Với Redux thường sử dụng một store duy nhất cho toàn bộ ứng dụng. Tuy nhiên Mobx thì bạn có thể sử dụng nhiều Store. Store trong Mobx là mutable, nghĩa là bạn có thể thay đổi store của nó một cách trực tiếp . Tuy nhiên với Redux thì khác, bất kỳ hành động nào thay đổi state của store phải thực thiện qua action

3: Khi nào dùng Mobx
– Như các bạn đã thấy sự so sánh ở trên giữa Redux và Mobx. Bạn có thể thấy Mobx khá đơn giản, dễ dàng tiếp cận, code ngắn gọn.
– Thông thường mới tiếp cận hoặc các dự án tầm trung, bạn có thể sử dụng Mobx. Tuy nhiên chính việc tự do quá đà, cho phép thay đổi state trong store một cách trực tiếp là lý do khi các ứng dụng lớn lên, mọi người có xu hướng dùng Redux nhiều hơn. Mọi hành động thay đổi state của store phải thông qua action, như thế khi có lỗi sẽ dễ dàng debug và tìm nguồn gốc phát sinh lỗi
=> Tóm lại : Với người mới học hoặc các ứng dụng nhỏ, tầm trung, ít member thì có thể sử dụng Mobx. Với các ứng dụng lớn, nhiều chức năng, nhiều thành phần member trong team thì nên sử dụng Redux

-Bản thân mình đã dùng thằng Mobx cho một dự án cũng ở tầm trung, cũng gọi là gần lớn chứ chưa phải lớn hẳn . Về cơ bản mình khá thích thằng này nhưng có một điểm mình không thích ở nó, các bạn xem đoạn code sau :

@observable loadingPaymentNumber = false;
@observable numberBooking = 0;
@action   
getNumberBookingWaitPayment(){ 
       this.loadingPaymentNumber = true; 
       API.getBookingWaitPayment(1) 
       .then(res => {
            this.loadingPaymentNumber = false;
            if(res.status === 200){  
              this.numberBooking = res.data.meta.pagination.total;
            }
        })
      .catch(err => this.loadingPaymentNumber = false)    }

Như các bạn thấy đoạn code trên sẽ call api, có 2 biến là loadingPaymentNumber và numberBooking mình để anotation là @observable để bên View có thể lắng nghe sự thay đổi giá trị của các biến này và render lại. Tuy nhiên chính điều này lại gây cho mình 1 sự khó chịu, khi thực thi hàm trên, component sẽ render lại 3 lần. Lần đầu là trước khi api được gọi, khi bạn gán this.loadingPaymentNumber = true. Lần 2 là sau khi api trả về dữ liệu thành công . Bạn lại gán this.loadingPaymentNumber = true. Và lần 3 chính là khi bạn gọi câu lệnh này this.numberBooking = res.data.meta.pagination.total . Điều này thực sự gây khó chịu cho mình vì nó render những 3 lần mà mình thấy không cần thiết. Nếu sử dụng Redux sẽ không bị vấn đề này hoặc nếu vẫn dùng Mobx bạn phải nhét chúng vào 1 đối tượng nào đó , tuy nhiên cứ nhét vào 1 đối tượng thì tới lúc nào đó đối tượng đó của bạn nó sẽ lại trở thành một đống hỗn độn không biết đâu mà lần

Phần sau mình sẽ giới thiệu cho các bạn một số thành phần chính của Mobx và chúng ta sẽ làm một bài ví dụ ứng dụng nó trong project thực tế như thế nào nhé. Cảm ơn các bạn đã theo dõi !

Writer : Martin Tran

Leave a Reply

Your email address will not be published. Required fields are marked *