React MobX

Mikirin flow aplikasi React kita juga udah pusing, jangan sampai library tambahan yang kita pakai malah nambah pusing.

Mungkin akan ada yang bilang bahwa saya gak bener aja menggunakannya Redux sehingga bikin pusing. Mungkin bener juga apa yang situ bilang, jadi komen aja harusnya seperti apa best practice nya. Really appreciated.

Tapi untuk saat ini, menggunakan MobX mengurangi pusing saya dalam membuat aplikasi menggunakan React. Saya gak akan membandingkan Redux dengan MobX. Disini saya hanya akan memperlihatkan bagaimana menggunakan MobX pada sebuah aplikasi sederhana, contoh paling umum adalah membuat aplikasi Todo.

  • Pastikan koneksi internet kamu bagus. Karena perlu meng-unduh banyak library.
  • Kamu juga harus udah tau cara install NodeJS dan NPM. Memang ini untuk aplikasi front-end, tapi dependency JavaScript sekarang banyak pake NPM.
  • Kamu udah ngerti dan sering pakai JavaScript + HTML!
  • Kamu pernah membuat aplikasi sederhana menggunakan React
  • Dan lain – lain (lupa)

Disini saya gak akan menampilkan semua codingnya, kepanjangan! Nanti source code lengkap bisa kamu lihat di GitHub, tautan ada paling bawah deh.

Supaya cepet, kita akan pakai create-react-app untuk membuat pondasi awalnya.

npm install -g create-react-app
create-react-app todo
cd todo/

Kita akan tambahkan MobX.

npm install mobx –save
npm install mobx-react –save
npm install mobx-react-devtools –save
npm install node-uuid –save

Sekarang coba kita preview dulu, biar gak bosen.

npm start

Sebuah tab baru di browser kamu akan terbuka otomatis dengan alamat http://localhost:3000/ . Kalau gak muncul atau error, mungkin ada masalah dengan konfigurasi hosts kamu, sana main dulu ke StackOverflow, yang jelas belajar bahasa Inggris juga biar tambah pinterrrr.

Store ini bayangkan kyak database sederhana, yang manfaatnya untuk menyimpan data sementara yang berada pada codingan JavaScript kita. Gak ngerti….?. Karena kalau browser di refresh, maka data dalam Store ini akan hilang. Kalau yang baru tau, nah sekarang tau.

Buat file src/Store/Todo.js dengan isi dibawah

import { extendObservable } from ‘mobx’;
import uuid from ‘node-uuid’;

/**
 * The Todo item.
 */
export class Todo {
  parent = null;
  constructor(parent) {
    extendObservable(this, {
      data: {},
      isLoading: false
    });
    this.parent = parent;
  }
  update(data) {
    this.data = data;
  }
}


/**
 * The Todo Store.
 */
export class TodoStore {
  constructor() {
    extendObservable(this, {
      items: [],
      isLoading: false
    });
  }
}

Semua data Todo akan disimpan pada key “items”, dan setiap data Todo akan disimpan pada key “data”.

Penggunaannya bisa kita import pada “src/App.js“, atau terserah semau kamu nanti akan dipakai dimana.

Pada src/App.js tambahkan.

import { TodoStore } from ‘./Store/Todo’;

this.store = new TodoStore();

Selengkapnya seperti ini.

import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;

import { observer } from ‘mobx-react’;
import { TodoStore } from ‘./Store/Todo’;


const App = observer(class App extends Component {
  constructor() {
    super();
    this.todoStore = new TodoStore();
  }
  render() {
    // Your existing render
    ………..
  }
});


export default App;

Menggunakan konsep Store dan MobX, maka fungsi untuk mengolah data Todo dan menyimpannya pada key “items” dapat disiapkan pada Store.

Kita tambahkan dulu sebuah sebuah fungsi untuk membuat data Todo baru pada Store yang sebelumnya telah dibuat.

/**
 * The Todo Store.
 */
export class TodoStore {
  ………….
  create(data) {
    const item = new Todo(this);
    this.items.push(item);
    item.update(data);
  }
  …………..
}

Cara memakainya sederhana. Contoh kita telah membuat sebuah input text biasa. Ketika input text tersebut di “enter”, maka akan memanggil sebuah fungsi yang akan menyimpan hasil ketikan di input text.

import React, { Component, PropTypes } from ‘react’;
import { observer } from ‘mobx-react’;

const Footer = observer(class Footer extends Component {
  static propTypes = {
    store: PropTypes.object.isRequired
  };
  ………………………………….
  handleTextKeyDown(e) {
    this.props.store.create({
      text: this.text
    });
  }
});


export default Footer;

Seperti terlihat diatas, kita hanya perlu memanggil fungsi “create” pada Store yang telah disediakan tadi.

this.props.store.create({
  text: “Ini text todo baru loh!”
});

Untuk menghapus sebuah data Todo pun konsep nya sama dengan menambah diatas. Kita siapkan dulu sebuah fungsi pada class Todo didalam file src/Store/Todo.js

/**
 * The Todo item.
 */
export class Todo {
  ……………………………….
  delete() {
    this.parent.removeItem(this);
  }
  ……………………………….
}

Dan sebuah fungsi di class TodoStore

/**
 * The Todo Store.
 */
export class TodoStore {
  …………………………………………..
  removeItem(item) {
    this.items.splice(this.items.indexOf(item), 1);
  }
  …………………………………………..
}

Cara memakainya sama seperti fungsi create

import React, { Component, PropTypes } from ‘react’;
import { observer } from ‘mobx-react’;

const Item = observer(class Item extends Component {
  static propTypes = {
    todo: PropTypes.object.isRequired
  };
  ……………………………………………
  handleRemove() {
    this.props.todo.delete();
  }
});


export default Item;

Untuk menampilkan data Todo sangat sederhana, tinggal melihat struktur dari Store yang kita punya

import React, { Component, PropTypes } from ‘react’;
import { observer } from ‘mobx-react’;

const Item = observer(class Item extends Component {
  static propTypes = {
    todo: PropTypes.object.isRequired
  };
  ………………………………………………
  render() {
    return this.props.todo.data.text;
  }
  ………………………………………………
});


export default Item;

Yang penting dari penggunaan MobX secara dasar adalah pada fungsi observer dan extendObservable. Dimana observer digunakan supaya class Component akan melakukan render ulang ketika terdapat perubahan data yang didefinisikan pada extendObservable. Dengan syarat data yang didefinisikan pada extendObservable harus digunakan pada render. Jika tidak, walaupun terdapat perubahan data, maka component tidak akan di render ulang.

Ketika akan mengambil / memperbaharui / menghapus data dari server (menggunakan AJAX), maka disarankan buat fungsi-fungsi baru di Store. Sehingga proses pembaharuan data pada Store lebih terkontrol.

Silahkan klik untuk melihat source code lengkap.