使用 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
,可以看到跟上一章节一样的效果。
本小节的代码可以在这里查看。