MobX 状态管理：从头开始的项目指南

2024-01-12 16:25:58

在 React 开发的世界中，状态管理是一个至关重要的方面，它决定了应用程序如何存储和管理其内部数据。MobX 是一个流行且强大的状态管理库，它可以简化这个过程，并为您的应用程序提供响应式状态管理体验。

通过本指南，我们将着手一个项目，亲自体验 MobX 的工作原理。我们将一步一步地创建、处理和操纵应用程序状态，同时重点关注 MobX 提供的独特功能和优势。

1. 设置和初始化

首先，让我们创建一个新的 React 应用程序并安装必要的依赖项：

npx create-react-app my-mobx-project
cd my-mobx-project
npm install mobx react-mobx

现在，在 src 目录中创建两个文件：store.js 和 App.js。

2. 创建 MobX 存储

在 store.js 中，我们将定义我们的 MobX 存储：

import { observable, action } from "mobx";

class TodoStore {
  @observable todos = [];

  @action
  addTodo(todo) {
    this.todos.push(todo);
  }

  @action
  removeTodo(todo) {
    this.todos = this.todos.filter((item) => item !== todo);
  }
}

export default new TodoStore();

这里，我们使用 MobX 的 observable 和 action 装饰器来定义可观察的状态（todos）和操作（addTodo 和 removeTodo）。

3. 连接存储到组件

在 App.js 中，我们将我们的 MobX 存储连接到 React 组件：

import React from "react";
import { observer } from "mobx-react";
import store from "./store";

const App = () => {
  const { todos, addTodo, removeTodo } = store;

  return (
    <div>
      <ul>
        {todos.map((todo) => (
          <li key={todo}>{todo}</li>
        ))}
      </ul>
      <input type="text" placeholder="Add a todo" onKeyPress={(e) => { if (e.key === 'Enter') addTodo(e.target.value); }} />
    </div>
  );
};

export default observer(App);

使用 MobX 的 observer HOC，我们将组件标记为响应式，以便在存储发生更改时重新渲染。

4. 使用存储

现在，我们可以在我们的组件中使用 addTodo 和 removeTodo 操作：

  const addTodo = (e) => {
    if (e.key === "Enter") {
      store.addTodo(e.target.value);
      e.target.value = "";
    }
  };

  const removeTodo = (todo) => {
    store.removeTodo(todo);
  };