切換語言為:簡體

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

  • 爱糖宝
  • 2024-10-25
  • 2050
  • 0
  • 0

簡介

在現代前端開發中,狀態管理是構建複雜應用時不可或缺的一部分。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-reactProvider 元件來包裹我們的根元件。

  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。


0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.