Redux 高级库新潮流：Mobx、Reselect 常用规则与方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Redux 已成为状态管理的重要工具。然而，开发人员也发现很多时候使用 Redux 过于繁琐，需要在很多地方手动编写繁琐的代码，才能完成最简单的状态管理。

为了解决这个问题，出现了一些高级库，如 Mobx 和 Reselect，它们提供了更简单、更高效的状态管理方式，并能够轻松实现复杂的状态管理逻辑。本文将详细介绍这两个库的常用规则与方法，并提供示例代码，帮助读者更好地理解和使用它们。

Mobx

Mobx 是一个用于状态管理的库，它允许您将状态声明为可观察对象，并自动跟踪状态对象的引用和使用，并确保对状态对象的修改能够自动触发相关的 UI 更新。在 Mobx 中，您只需要跟踪状态，而不需要编写任何复杂的代码，即可实现响应式 UI 的管理。以下是一些常见的 Mobx 辅助工具方法：

@observable

@observable 用于将属性声明为可观察的。一个被 @observable 修饰的属性会被 Mobx 跟踪其使用情况，以便在需要更新 UI 时自动触发更新。示例代码如下：

import { observable } from 'mobx';

class Todo {
  @observable
  title = 'Todo Title';
  @observable
  completed = false;
}

@computed

@computed 用于声明一个派生属性，这个属性的值由其它可观察属性计算而来。当与其它可观察属性关联时，当这些可观察属性的值发生变化时，被 @computed 修饰的属性也会自动重新计算。示例代码如下：

// javascriptcn.com 代码示例
import { observable, computed } from 'mobx';

class TodoList {
  @observable
  todos = [];

  @computed
  get completedTodoCount() {
    return this.todos.filter((todo) => todo.completed === true).length;
  }
}

@action

@action 用于声明一个函数为 Mobx 中的动作，这个函数用于修改可观察对象的值。在修改可观察对象时，必须使用 @action，否则 Mobx 会跟踪不到对象的变化。示例代码如下：

// javascriptcn.com 代码示例
import { observable, action } from 'mobx';

class Counter {
  @observable
  count = 0;

  @action
  increment() {
    this.count++;
  }

  @action
  decrement() {
    this.count--;
  }
}

autorun

autorun 函数会在可观察对象发生变化时自动执行处理函数，通常用于处理单一的变化刷新逻辑。示例代码如下：

// javascriptcn.com 代码示例
import { observable, autorun } from 'mobx';

var counter = observable({
  count: 0,
  increment() {
    this.count++;
  },
  decrement() {
    this.count--;
  },
});

autorun(() => {
  console.log(counter.count);
});

counter.increment(); // 输出 1
counter.decrement(); // 输出 0

Reselect

Reselect 是一个用于创建可记忆的选择器（selector）的库，它的作用类似于计算属性。与计算属性不同的是，Reselect 可以缓存选择器的结果，只有当选择器的参数实际改变时才重新计算结果。以下是 Reselect 的一些常见辅助工具方法：

createSelector

createSelector 接受一个或多个依赖选择器（Dependency Selectors）和一个计算函数，返回一个新的选择器函数。当依赖选择器的输入值发生变化时，Reselect 将重新计算结果：

// javascriptcn.com 代码示例
import { createSelector } from 'reselect';

const todosSelector = (state) => state.todos;
const visibilityFilterSelector = (state) => state.visibilityFilter;

const filteredTodosSelector = createSelector(
  [todosSelector, visibilityFilterSelector],
  (todos, visibilityFilter) => {
    switch (visibilityFilter) {
      case 'SHOW_ALL':
        return todos;
      case 'SHOW_COMPLETED':
        return todos.filter((todo) => todo.completed);
      case 'SHOW_ACTIVE':
        return todos.filter((todo) => !todo.completed);
      default:
        throw new Error('Unknown filter: ' + visibilityFilter);
    }
  }
);

createStructuredSelector

createStructuredSelector 可以将多个选择器函数状态，将它们的结果作为一个组合对象返回：

// javascriptcn.com 代码示例
import { createStructuredSelector } from 'reselect';

const todosSelector = (state) => state.todos;
const visibilityFilterSelector = (state) => state.visibilityFilter;

const todoAppSelector = createStructuredSelector({
  todos: todosSelector,
  visibilityFilter: visibilityFilterSelector,
});

createSelectorCreator

createSelectorCreator 可以用于创建自定义选择器的创建函数。示例代码如下：

// javascriptcn.com 代码示例
import { createSelectorCreator } from 'reselect';

const customSelectorCreator = createSelectorCreator(
  customMemoize,
  isEqual
);

const customSelector = customSelectorCreator(
  [todosSelector, visibilityFilterSelector],
  (todos, visibilityFilter) => {
    switch (visibilityFilter) {
      case 'SHOW_ALL':
        return todos;
      case 'SHOW_COMPLETED':
        return todos.filter((todo) => todo.completed);
      case 'SHOW_ACTIVE':
        return todos.filter((todo) => !todo.completed);
      default:
        throw new Error('Unknown filter: ' + visibilityFilter);
    }
  }
);

总结

Mobx 和 Reselect 是两个能够解决 Redux 开发中常见问题的高级库。Mobx 提供了一种简单直接的响应式状态管理方式，而 Reselect 则提供了一种优雅的选择器设计方式。通过使用这两个库，开发人员可以更轻松地编写高效的 Redux 应用程序，并快速实现各种复杂的状态管理逻辑。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651f89db95b1f8cacd717130