Cách sử dụng MobX trong React Native

Cách sử dụng MobX trong React Native

- 6 mins

MobX là gì ?

MobX có thể hiểu một cách ngắn gọn là một thư viện giúp quản lý State (State Management) giống với Redux. MobX cung cấp cơ chế observer pattern giúp các component có thể dễ dàng update state từ Store hơn.

MobX Flow

Tại sao lại là MobX ?

Nói về State Management trong React Native thì chắc chắn ai cũng biết nó rất quan trọng và không thiểu thiếu. Một trong số cái tên có liên quan có thể kể đến chắc chắn là Redux.

Tuy nhiên sau một thời gian dài sử dụng, đặc biệt là làm việc với VueJS một thời gian, mình rất thích Vuex bởi cách thức chúng hoạt động lẫn cách khai báo trong source code, rất dễ. Với Redux thì việc khai báo khá lằng nhằng: reducer, action/ async action, store, mapping… Vì thế việc tìm kiếm một công cụ “linh hoạt hơn” cho React Native đã dẫn lối mình tìm đến MobX.

Cách sử dụng MobX trong React Native ?

Bây giờ giả sử mình làm một app Task List có dạng như sau:

Task List

Dưới đây là source code khi chưa gắn MobX

1. Cài đặt MobX

MobX có thể được sử dụng cho nhiều dự án với JS chứ không chỉ React Native, vì thế chúng ta cần cài đặt 2 gói mobxmobx-react:

npm i mobx mobx-react --save

2. Khai báo store:

Trong ví dụ trên mình chỉ dùng một mảng đặt trong state của component, các actions thao tác cũng ở trong này. Vì thế ta sẽ dời chúng ra Store như sau:

3. File component sẽ update lại như sau:

Những lưu ý khi dùng MobX:

Cú pháp decorators của ES7

Nếu để ý các bạn sẽ thấy vài keywords lạ @observable, @observer, @action ngay trước các khai báo biến và hàm. Đó chinh là decorators của ES7. Để editor cũng như ứng dụng build được thì ta cần thực hiện 1 vài chỉnh sửa như sau:

Cài đặt thêm babel-plugin-transform-decorators-legacy

npm i babel-plugin-transform-decorators-legacy --save-dev

Cấu hình vào babel (file .babelrc):

{
  "presets": ["react-native"],
  "plugins": ["transform-decorators-legacy"]
}

Tạo thêm file .tsconfig.json: File này chỉ có tác dụng để editor hiểu cú pháp decorators và không báo lỗi khi code thôi

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "allowJs": true
  }
}

Trackable trong MobX là tự động

MobX sẽ chỉ tự động update component với những trackable functions (thường có @computed ở đầu) hoặc render() của một component có @observer. Đó là lý do tại sao chúng ta thấy các action sẽ làm component render lại mà không hề có setState. Nếu không có @observer thì khi store update component sẽ không đổi.

Điều này khiến cho MobX sử dụng rất đơn giản nhưng đôi khi cũng khá khó theo dõi component nếu ta sử dụng các stores không hợp lý, dẫn đến việc component bị render rất nhiều lần và tìm được các store nào gây ra việc đó thật sự là không dễ.

Cẩn thận với các biến array và object trong store MobX

Các biến array và object (có @observable) trong store thật chất là các observable objects. Việc này khiến cho khi chúng ta truy xuất giá trị hoặc thực thi các hàm của array/object đôi khi xảy ra lỗi.

Để giải quyết việc này với mảng ta sẽ dùng slice() để sử dụng và đảm bảo nó sẽ được track từ store. Với các object chúng ta có thể dùng thêm hàm JS() của MobX cung cấp để convert về Object bình thường.

Tham khảo thêm:

Ngoài ra các bạn có thể tham khảo thêm về MobX tại: https://mobx.js.org/index.html

Full source example: https://github.com/viettx-demos/SimpleReactNativeMobX

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