从经典到新贵，前端数据管理全家桶重构实战：React+Redux vs React+Mobx

2023-10-06 00:23:43

从Redux到Mobx，携手React构建高效应用

在构建复杂的React应用程序时，数据管理一直是开发者面临的重大挑战之一。Redux作为一款广受欢迎的状态管理框架，凭借其单向数据流、可预测性和调试方便等优点，成为了React开发者的首选。然而，随着项目规模的不断扩大，Redux也逐渐暴露出一些问题，例如学习成本较高、代码冗余以及性能瓶颈等。

作为后起之秀，Mobx以其简单易学、灵活性和高性能等优势，正在迅速成为Redux的有力竞争者。Mobx采用响应式编程范式，允许开发者以一种更直观和声明的方式管理应用程序的状态。同时，Mobx还提供了丰富的API，支持各种复杂场景的处理。

携手Mobx，重构React-Cnode项目

为了更好地了解Mobx的优势和使用方法，笔者决定将之前使用React全家桶构建的React-Cnode项目进行重构，并将其与原有的Redux版本进行比较。

首先，在项目中引入Mobx。Mobx的安装和使用都非常简单，只需在项目中添加相应的依赖包即可。

npm install --save mobx mobx-react

接下来，我们需要将原有Redux的状态管理逻辑迁移到Mobx中。Mobx提供了两种主要的状态管理方式：可观察状态（observable）和动作（action）。可观察状态类似于Redux中的store，用于存储应用程序的状态数据；动作类似于Redux中的action，用于修改应用程序的状态数据。

例如，在原有的Redux版本中，我们使用Redux的combineReducers方法将多个reducer组合成一个根reducer，以便管理应用程序的整体状态。而在Mobx中，我们可以使用observable.map方法创建可观察的状态对象，并使用action.bound方法创建动作函数。

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

class AppState {
  @observable todos = [];

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

  @action
  removeTodo(todo) {
    this.todos.remove(todo);
  }
}

const appState = new AppState();

autorun(() => {
  console.log(appState.todos);
});