快速上手#

Reduck 是 Modern.js 团队开发的遵循 MVC 模式的状态管理库，底层状态存储基于 Redux 实现，同时提供更高层级的抽象，并完全兼容 Redux 生态。

Reduck 的目标是以 MVC 模式组织 React 应用开发结构，将业务逻辑维护在 Model 层，业务逻辑与 UI 解耦，让开发业务逻辑更集中、更简单，同时通过更高层级的抽象，减少重复工作（样板代码）。

Reduck 在 MVC 模式中，扮演 M(Model) 的角色，React UI Component 对应 V(View)，从 Reduck 中获取 Model 并修改 Model 的 React Container Component 对应 C(View Controller/Container)。

Modern.js 的状态管理解决方案，是通过内置 Reduck 实现的。在 Modern.js 中使用 Reduck，不仅免去了手动集成的环节，而且所有 Reduck API 都可以从 Modern.js 的 Runtime 包中直接导入使用，具有更好的一致性体验。

核心概念#

Reduck 中的核心概念只有 4 个： Model、State、Actions、Effects。

Model: 对独立模块的逻辑和所需状态的封装，由 State、Actions、Effects 组成。

State: Model 中保存的状态。

Actions: 用于修改 State 的纯函数，函数必须是同步的。

Effects: 用于修改 State 的带有副作用的函数，函数可以是异步的。Effects 中可以调用自身或其他 Model 的 Actions 和 Effects。

Reduck 数据流如下图所示：

基本用法#

下来我们以一个简单的 计数器 应用为例，演示 Reduck 的基本用法。

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

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

const countModel = model('count').define({
  state: {
    value: 1,
  },
});

export default countModel;

我们使用 API model 创建 countModel，countModel 当前只包含存储计数器值的状态，即代码中的 value。

我们定义一个 action，用于计算器自增加 1：

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

const countModel = model('count').define({
  state: {
    value: 1,
  },
  actions: {
    add(state) {
      state.value += 1;
    },
  },
});

export default countModel;

在 add action 中，我们可以直接修改 state 的值，进行加 1 操作，而不需要把 state 作为不可变对象进行操作，这是因为 Reduck 集成了 immer，可以直接修改原 state 对象。

接下来，我们演示如何在组件中使用 Model。

新建一个组件 Counter，在组件内通过 useModel API 使用 countModel：

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

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

  return (
    <div>
      <div>counter: {state.value}</div>
      <button onClick={() => actions.add()}>add</button>
    </div>
  );
}

useModel 获取 countModel 的 state 和 actions，组件展示当前计算器的值，点击 add 按钮，计数器自增 1。

最终演示效果如下：

这样，我们就完了一个简单的计数器应用。本节完整的示例代码可以在这里查看。