1.0.2 • Published 3 years ago
@liukewia/use-model v1.0.2
Usage
1. 创建 models
在 src/ 下或 src/ 下任意位置创建 models 文件夹,其中每个 js/ts 文件为一个 model,文件名表示 model 名,文件内容需要默认导出一个方法。例如:
// src/models/auth.ts
import { useState, useCallback } from 'react';
export default () => {
const [user, setUser] = useState(null);
const signin = useCallback((name) => {
setUser(name);
}, []);
const signout = useCallback(() => {
setUser(null);
}, []);
return {
user,
signin,
signout,
};
};
2. 利用 webpack 或其它工具获取 models 变量
在添加多个 models 后,最后在该 models 文件夹内添加 index.js/ts 文件,收集所有 models 并默认导出。
// src/models/index.ts
import { Models } from '@liukewia/use-model';
const models: Models = {};
const modelFiles = require.context('.', false, /\.(j|t)s$/);
modelFiles.keys().forEach((fileName) => {
const resolvedName = fileName.replace(/^\.\/(.*)\.\w+$/, '$1');
if (resolvedName === 'index') return;
models[resolvedName] = modelFiles(fileName).default;
});
export default models;
3. 用 withModelProvider 包裹 根组件
// src/index.tsx
import models from './models';
import App from './App';
import { withModelProvider } from '@liukewia/use-model';
const appWithModels = withModelProvider(models)(App);
4. 使用 useModel
在函数组件内,引入 useModel 并传入至多两个参数,model 名和 selector,即可使用。
selector 作用是可过滤出部分需要的 model 属性。model 名必需,selector 可选。例如:
const { user, signin } = useModel('auth', (model) => ({
user: model.user,
signin: model.signin,
}));
Build
cd packages/use-model
pnpm build
Publish
pnpm -r publish --tag latest --access public
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago
1.0.0-rc.6
3 years ago
1.0.0-rc.4
3 years ago
1.0.0-rc.3
3 years ago
1.0.0-rc.2
3 years ago
1.0.0-rc.1
3 years ago