跳转到主文档

使用 Model

上一小节中,我们实现了 Model,已经把 AllContacts 组件中原有的 UI 无关业务逻辑解耦出来。

这一小节中,我们使用这个 Model 直接把 AllContacts 组件重新还原出来,实现变得更简洁清晰:

src/contacts/components/AllContacts/index.tsx
import { useEffect } from 'react';
import { useLocalModel } from '@modern-js/runtime/model';
import { List } from 'antd';
import Item from '../Item';
import contacts from '../../models/contacts';

const AllContacts = () => {
const [{ items, error, pending }, actions] = useLocalModel(contacts);

useEffect(() => {
if (!items.length && !error && !pending) {
actions.load();
}
});
return (
(items.length && (
<List
dataSource={items}
renderItem={info => <Item key={info.name} info={info} />}
/>
)) || (
<div className="p-4 items-center border-gray-200 border-b border-t custom-text-gray">
Pending...
</div>
)
);
};

export default AllContacts;

以上代码跟上一章节中 AllContacts 组件的代码等价。

useLocalModel 是 Modern.js 提供的 hooks API,可以使用 Model,在组件中提供 Model 中定义的 state,或通过 actions 调用 Model 中定义的 side effect 与 action,从而改变 Model 的 state。

Modern.js 的 Model 能够这样使用的原因是 Model 是基于 FP 的,不像 OOP 的 Model 那样自身持有和封装了状态,对外部提供方法访问和修改自身内部的状态。

Model 是业务逻辑,是计算过程,本身不创建也不持有状态,只有在被组件用 hooks API 使用后,才在指定的地方(比如这个例子里,是组件内部的 state)创建状态。

执行 pnpm run dev,可以看到跟上一章节一样的效果。


本小节的代码可以在这里查看