React中Mobx6的4种常用操作，提升你的状态管理技能

2023-11-18 19:33:17

使用 Mobx 6 简化 React 状态管理

在现代 React 应用中，管理状态是一个关键方面。Mobx 6 是一个强大的状态管理库，旨在简化这一过程，提升代码质量和应用可维护性。

创建 RootStore

RootStore 是 Mobx 6 中状态管理的核心。它保存了应用中所有状态数据。通过使用装饰器和动作方法，可以轻松创建 RootStore：

import { observable, action, computed } from "mobx";

class RootStore {
  @observable todoList = [];

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

  @computed
  get todoCount() {
    return this.todoList.length;
  }
}

const rootStore = new RootStore();

使用 RootStore

创建 RootStore 后，可以使用 MobX-React 的 observer 包装组件，以侦听状态更改并更新 UI：

import { observer } from "mobx-react";

const TodoList = observer(() => {
  const rootStore = useStore();

  return (
    <ul>
      {rootStore.todoList.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
});

创建子Store

随着应用的复杂性增加，将状态划分为多个子Store 有助于更好的组织和管理。遵循与 RootStore 相同的模式，可以使用 Mobx 6 创建子Store：

import { observable, action, computed } from "mobx";

class TodoStore {
  @observable todoList = [];

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

  @computed
  get todoCount() {
    return this.todoList.length;
  }
}

const todoStore = new TodoStore();

在组件中使用子Store

使用 Mobx-React 的 inject 装饰器可以将子Store 注入组件中：

import { observer, inject } from "mobx-react";

const TodoList = inject("todoStore")(
  observer(() => {
    const { todoStore } = useStores();

    return (
      <ul>
        {todoStore.todoList.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    );
  })
);