介绍
@sewing-kit/model是一个基于TypeScript编写的npm包，它用于构建通用、可配置的前端应用程序。通过这个包，您可以构建各种应用程序，比如网站应用程序、桌面应用程序、以及移动应用程序等。
使用步骤
安装
要使用@sewing-kit/model，您需要先安装它。可以像下面这样使用 npm 包管理器安装：
npm install --save @sewing-kit/model
引入
在您的项目中，可以像下面这样引入@sewing-kit/model：
import createModel from '@sewing-kit/model';
创建一个模型
创建一个模型的第一步是定义一个中心状态。把中心状态定义成一个接口，并在它的语境中描述状态的每一个字段。例如，下面是一个名为Counter的模型：
interface CounterState {
count: number;
}定义好中心状态后，接下来就可以创建模型了。使用createModel 函数创建模型，并将其接收一个参数配置对象。
-- -------------------- ---- -------
----- ------- - -------------
------ - ------ - --
--------- -
---------------- -
------ - ------ ----------- - - --
--
---------------- -
------ - ------ ----------- - - --
--
--
---在上面这个示例中，我们定义了一个名为counter的模型。该模型的初始状态为 { count: 0 }。此外，该模型还定义了两个reducers：increment 和 decrement。这两个reducers分别用来递增和递减状态中的count属性。
处理模型的状态
要管理模型的状态，您需要使用模型的构造函数来实例化它。例如，要创建一个触发模型的状态，可以写出以下代码：
const myCounter = counter();
模型的实例包含一个称为state的属性，该属性存储模型的状态：
console.log(myCounter.state.count); // -> 0
使用 reducer 更改状态时，请使用传递给 reducer 的参数来检索 model.state 类型或其子类型的当前状态：
myCounter.dispatch(counter.reducers.increment); console.log(myCounter.state.count); // -> 1
使用外部reducers
在某些情况下，您可能想使用外部reducers来更新模型的状态。例如，如果您要从其他应用程序的动作生成器中调用 reducers，就需要使用外部reducers。
使用dispatch方法，您可以将外部reducers附加到模型中：
function aCountReducer(state: CounterState) {
return { ...state, count: state.count + 1 };
}
myCounter.dispatch(aCountReducer);
console.log(myCounter.state.count); // -> 2快照
您可以使用snapshot方法来获取当前状态的快照。它返回一个简单的对象，其中包含模型的状态。这是在测试和调试时非常有用的。
console.log(myCounter.snapshot()); // -> { count: 2 }派发副作用
有时状态的更改不仅仅涉及在模型中更新纯粹的数据：您也可能需要与一些外部资源交互。
有一个用来处理副作用的钩子函数——effect，使用该函数可以进行副作用处理。
-- -------------------- ---- -------
----- ------- - -------------
------ - ------ - --
--------- -
-- ---
--
-------- -
----- ------------------------ -- - ----- -- -
----- -----------
-------------------------------------
--
--
---在上面的模型中，定义了一个名为incrementAsync的effect，该effect使用一个名为delay的函数来模拟异步界面操作。
要在模型中使用 effect，您需要通过dispatch方法来调用它：
await myCounter.dispatch(counter.effects.incrementAsync); console.log(myCounter.state.count); // -> 3
指南总结
在本指南中，我们介绍了如何使用@sewing-kit/model来构建通用和可配置的前端应用程序。
我们了解了如何创建模型、定义状态、处理副作用，以及调度效应，这些都是构建应用程序的必备要素。我们发现使用@sewing-kit/model，可以轻松创建多种类型的应用程序，提高工作效率，提高代码质量。
希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3cf38ddbf7be33b25670ee