在 React 中使用 MobX 實現狀態管理

簡介

在現代前端開發中，狀態管理是構建複雜應用時不可或缺的一部分。React 本身是一個宣告式的檢視層庫，並不直接提供狀態管理的解決方案。幸運的是，有多種第三方庫可以幫助我們管理狀態，其中 MobX 是一個非常流行的選擇。它提供了一種簡潔、透明且高效的響應式狀態管理方式。本文將透過一個簡單的待辦事項（Todo）應用示例，介紹如何在 React 中使用 MobX 來管理狀態。

安裝依賴

在開始之前，確保你的開發環境已經安裝了 Node.js 和 npm/yarn。然後，建立一個新的 React 應用，並安裝 MobX 及其 React 繫結：

npx create-react-app mobx-todo-app
cd mobx-todo-app
npm install mobx mobx-react

建立 MobX Store

MobX 使用“stores”來儲存和管理應用的狀態。我們將建立一個簡單的 TodoStore 來管理待辦事項。

1. 在專案根目錄下建立一個名為 store.js 的檔案。

2. 定義 TodoStore 類，並使用 makeAutoObservable 函式使其屬性和方法自動響應狀態變化。

// store.js
import { makeAutoObservable } from "mobx";

class TodoStore {
  todos = [];

  constructor() {
    makeAutoObservable(this);
  }

  addTodo(text) {
    this.todos.push({ text, completed: false });
  }

  toggleTodo(index) {
    const todo = this.todos[index];
    todo.completed = !todo.completed;
  }
}

const store = new TodoStore();
export default store;

建立 React 元件

接下來，我們將建立一個 React 元件 TodoApp.js，它將使用我們的 TodoStore 來管理待辦事項的狀態。

1. 在 src 目錄下建立 TodoApp.js 檔案。

2. 使用 useState 鉤子來管理輸入框的狀態。

3. 透過呼叫 TodoStore 中的方法來新增和切換待辦事項的狀態。

// TodoApp.js
import React, { useState } from 'react';
import store from './store';

function TodoApp() {
  const [input, setInput] = useState('');

  const handleAddTodo = () => {
    store.addTodo(input);
    setInput('');
  };

  return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {store.todos.map((todo, index) => (
          <li key={index} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            {todo.text}
            <button onClick={() => store.toggleTodo(index)}>Toggle</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

使用 Provider 包裹應用

爲了確保 TodoStore 在整個應用中是可訪問的，我們將使用 mobx-react 的 Provider 元件來包裹我們的根元件。

1. 在 src/index.js 檔案中，使用 Provider 元件包裹 TodoApp。

javascript

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import store from './store';
import TodoApp from './TodoApp';

ReactDOM.render(
  <Provider store={store}>
    <TodoApp />
  </Provider>,
  document.getElementById('root')
);

結論

透過這個簡單的示例，我們可以看到如何在 React 應用中使用 MobX 來管理狀態。MobX 提供了一種簡單而強大的方式來處理狀態，使得狀態管理變得更加直觀和高效。希望這個示例能幫助你理解如何在實際專案中應用 MobX。