Modern.js 中的模型通信机制详解

引言

在现代前端开发中，状态管理是构建复杂应用的关键环节。Modern.js 提供了一套优雅的模型（Model）系统，让开发者能够高效管理应用状态。本文将深入探讨 Modern.js 中模型间的通信机制，帮助开发者掌握状态管理的核心技巧。

模型通信概述

模型通信主要涉及两种场景：

1. 不同模型之间的交互
2. 同一模型内部 Effects 和 Actions 之间的协作

理解这些通信机制对于构建可维护、可扩展的前端应用至关重要。

跨模型通信实战

让我们通过一个计数器应用案例来理解模型间通信。该应用包含两个模型：

• stepModel：控制计数步长
• counterModel：实现计数功能

模型定义

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

const stepModel = model('step').define({
  state: 1,  // 默认步长为1
});

const counterModel = model('count').define((context, { use, onMount }) => {
  const [, , subscribeStep] = use(stepModel);

  // 模型挂载后订阅stepModel变化
  onMount(() => {
    return subscribeStep(() => {
      console.log(`当前步长变为: ${use(stepModel)[0]}`);
    });
  });

  return {
    state: { value: 1 },
    actions: {
      add(state) {
        const [step] = use(stepModel);  // 获取最新步长
        state.value += step;
      },
    },
  };
});

关键点解析

1. 模型订阅机制：通过 use(stepModel) 获取订阅函数，监听步长变化
2. 状态获取时机：在 add 动作中实时获取步长，确保使用最新值
3. 生命周期钩子：onMount 确保在正确时机建立订阅

组件实现

function Counter() {
  const [state, actions] = useModel(counterModel);
  const [step, stepActions] = useModel(stepModel);

  return (
    <div>
      <div>当前步长: {step}</div>
      <button onClick={() => stepActions.setState(step + 1)}>
        增加步长
      </button>
      <div>计数值: {state.value}</div>
      <button onClick={() => actions.add()}>
        增加计数
      </button>
    </div>
  );
}

注意事项

• 避免在 define 回调中直接解构其他模型的状态值
• 状态获取应放在动作执行阶段，确保值最新
• Modern.js 默认提供 setState 等自动生成动作

模型内部通信

模型内部通信同样重要，主要涉及：

Effects 调用 Actions

const userModel = model('user').define({
  state: { data: null, loading: false },
  actions: {
    setData(state, payload) {
      state.data = payload;
    },
    setLoading(state, payload) {
      state.loading = payload;
    }
  },
  effects: {
    async fetchUser() {
      const [, actions] = use(userModel);
      actions.setLoading(true);
      const data = await fetchUserAPI();
      actions.setData(data);
      actions.setLoading(false);
    }
  }
});

动作间调用

const cartModel = model('cart').define({
  state: { items: [] },
  actions: {
    addItem(state, item) {
      state.items.push(item);
      this.logAdd(item);  // 调用其他动作
    },
    logAdd(state, item) {
      console.log('添加商品:', item);
    }
  }
});

重要原则

1. 避免在 define 回调中使用自身模型：会导致无限循环
2. 正确使用 onMount 钩子：在模型挂载后安全获取自身引用
3. 保持动作纯净：动作应专注于状态变更，复杂逻辑放在 Effects

最佳实践建议

1. 合理划分模型边界：按业务领域而非组件划分模型
2. 控制模型间依赖：避免形成复杂的依赖网络
3. 善用订阅机制：对于需要响应式更新的场景
4. 注意性能优化：避免不必要的订阅和状态更新

总结

Modern.js 的模型通信机制提供了灵活而强大的状态管理能力。通过本文的讲解，开发者应该能够：

• 理解模型间通信的原理和实现方式
• 掌握模型内部各部分的协作模式
• 避免常见的陷阱和反模式
• 构建出结构清晰、易于维护的状态管理方案

正确运用这些通信模式，将大幅提升复杂前端应用的可维护性和开发效率。