Modern.js 状态管理：Reduck 快速入门指南

前言

在现代前端开发中，状态管理一直是构建复杂应用的关键环节。Modern.js 团队开发的 Reduck 是一个基于 MVC 模式的状态管理库，它完美集成在 Modern.js 框架中，为开发者提供了简洁高效的状态管理解决方案。

Reduck 核心概念

Reduck 的设计哲学围绕着四个核心概念展开：

1. Model（模型）：封装独立模块的业务逻辑和状态
2. State（状态）：存储在 Model 中的数据
3. Actions（动作）：用于同步修改状态的纯函数
4. Effects（副作用）：处理异步操作和业务逻辑的函数

这种设计使得业务逻辑与UI组件能够清晰分离，符合现代前端架构的最佳实践。

环境准备

在开始使用 Reduck 前，确保你的 Modern.js 项目已经配置了状态管理插件。这可以通过修改项目配置中的 runtime.state 选项来实现。

计数器应用实战

让我们通过一个简单的计数器应用来演示 Reduck 的基本用法。

第一步：创建计数器模型

首先，我们定义一个名为 count 的 Model：

import { model } from '@modern-js/runtime/model';

const countModel = model('count').define({
  state: {
    value: 1,  // 初始状态
  },
  actions: {
    add(state) {
      state.value += 1;  // 直接修改状态
    },
  },
});

export default countModel;

这里有几个关键点需要注意：

• 使用 model() 函数创建模型实例
• state 定义了初始状态
• actions 包含了同步修改状态的方法
• Reduck 内部集成了 Immer，允许我们直接修改状态对象

第二步：在组件中使用模型

接下来，我们创建一个计数器组件来使用这个模型：

import { useModel } from '@modern-js/runtime/model';
import countModel from './models/count';

function Counter() {
  const [state, actions] = useModel(countModel);

  return (
    <div>
      <div>当前计数: {state.value}</div>
      <button onClick={() => actions.add()}>增加</button>
    </div>
  );
}

这个组件展示了 Reduck 的核心使用模式：

1. 通过 useModel hook 获取模型的状态和操作方法
2. 在 UI 中展示状态
3. 通过事件触发 action 来修改状态

第三步：运行效果

完成上述代码后，你将得到一个简单的计数器应用：

• 初始显示值为1
• 每次点击"增加"按钮，计数值会增加1

Reduck 的优势

相比传统的 Redux，Reduck 提供了几个显著优势：

1. 更简洁的代码：减少了大量模板代码
2. 更直观的状态修改：借助 Immer 可以直接修改状态
3. 更好的组织性：按照 MVC 模式组织代码
4. 无缝集成：作为 Modern.js 的内置功能，无需额外配置

进阶思考

虽然我们的计数器示例很简单，但它展示了 Reduck 的核心概念。在实际项目中，你可以：

1. 创建多个模型来管理不同业务模块的状态
2. 在 Effects 中处理异步操作（如API调用）
3. 实现模型间的通信和状态共享
4. 结合 Modern.js 的其他特性构建完整应用

总结

Reduck 作为 Modern.js 的状态管理解决方案，通过简洁的API和合理的架构设计，大大降低了状态管理的复杂度。本文通过计数器示例展示了其基本用法，但这只是冰山一角。随着项目复杂度的增加，Reduck 的 MVC 架构优势将更加明显。

对于 Modern.js 开发者来说，掌握 Reduck 是构建可维护、可扩展应用的重要一步。建议从简单项目开始实践，逐步探索 Reduck 更高级的特性。