Sử dụng Mobx để quản lý state thay cho redux trong React

Trong React, MobX là một thư viện quản lý trạng thái (state management) dựa trên kiến trúc observable-reactive. Nó cung cấp một cách đơn giản để quản lý trạng thái ứng dụng của bạn và tạo ra các thành phần UI linh hoạt và dễ bảo trì.

Để sử dụng MobX trong React, bạn cần cài đặt các gói MobX, MobX React và React DOM:

css
npm install mobx mobx-react react-dom --save

Sau đó, tạo một đối tượng trạng thái (state object) sử dụng MobX:

javascript
import { makeObservable, observable, action } from 'mobx';

class AppState {
  count = 0;

  constructor() {
    makeObservable(this, {
      count: observable,
      increment: action,
      decrement: action,
    });
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

export default new AppState();

Trong ví dụ này, đối tượng AppState chứa một thuộc tính count và hai phương thức increment và decrement, tăng và giảm giá trị của count.

Sau đó, sử dụng đối tượng AppState trong thành phần React:

javascript
import { observer } from 'mobx-react';
import appState from './appState';

const Counter = observer(() => {
  const handleIncrement = () => {
    appState.increment();
  };

  const handleDecrement = () => {
    appState.decrement();
  };

  return (
    <div>
      <h1>Count: {appState.count}</h1>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
});

export default Counter;

Ở đây, chúng ta đã sử dụng observer để đảm bảo rằng thành phần được cập nhật khi trạng thái của đối tượng AppState thay đổi. Khi appState.count thay đổi, MobX sẽ tự động gửi thông báo đến observer, giúp cập nhật giao diện người dùng một cách đúng thời điểm.

Đó là một ví dụ cơ bản về cách sử dụng MobX trong React để quản lý trạng thái ứng dụng. Bạn có thể tìm hiểu thêm về MobX và cách sử dụng nó trong React tại trang chủ của MobX.