整合 models 数据流
- 简化 @rematch/* 状态管理公共进行初始化;
- 约定是到 model 组织方式,不用手动注册 model
- 文件名即 name,model 内如果没有声明 name,会以文件名作为 name
- 内置 @rematch/loading,直接 loading 字段使用即可
- 更多 @rematch/core api
安装
npm i @uiw-admin/models --save
store
由 @rematch/core 的 init 初始化生成的状态存储
dispatch
更新状态方法
约定式的 model 组织方式
符合以下规则的文件会被认为是 model 文件,
- src/models 下的文件
- src/pages 下,子目录中 models 目录下的文件
- src/pages 下,子目录中 models.ts 文件
src
models/a.ts
pages
foo/models/b.ts
test/models.ts
model 校验
import { createModel } from '@rematch/core'
import { RootModel ,ModelDefault} from '@uiw-admin/models'
//------- createModel 方式 ------
// 通过
export default createModel()({name:"foo"})
export default createModel()({reducers:"foo"})
// ts 类型方式 通过
export default createModel<RootModel>()({name:"foo"})
export default createModel<RootModel>()({reducers:"foo"})
// 通过
const models = createModel()({reducers:"foo"})
export default models
//----- 直接一个对象的方式 ---- 不建议使用 ------
// 通过
export default { name: 'foo' };
export default { reducers: 'foo' };
// 通过
const model = { name: 'foo' };
export default model;
// ts 类型方式 通过
const model: ModelDefault = { name: 'foo' };
export default model;
类型
通过 @uiw-admin/models 导出类型:FullModel
,Store
,AddModel
,Dispatch
,RootState
,ModelDefault
,RootModel
。
model 用例
import { RootModel } from '@uiw-admin/models'
import { createModel } from '@rematch/core'
import { selectById } from '../servers/demo'
const demo = createModel<RootModel>()({
name: 'demo',
state: {
drawerVisible: false,
tableType: '',
queryInfo: {},
isView: false,
},
reducers: {
updateState: (state: any, payload: any) => ({
...state,
...payload,
}),
},
effects: (dispatch) => ({
async selectById(payload: any) {
const dph = dispatch
const data = await selectById(payload)
if (data.code === 200) {
dph.demo.updateState({
drawerVisible: true,
queryInfo: data.data || {},
})
}
},
clean() {
const dph = dispatch
dph.demo.updateState({
drawerVisible: false,
tableType: '',
queryInfo: {},
isView: false,
})
},
}),
})
export default demo
page 用例
import React from 'react'
import { useDispatch,useSelector } from 'react-redux'
import { Dispatch } from '@uiw-admin/models'
import { RootState } from '@uiw-admin/models'
const Demo = () => {
const dispatch = useDispatch<Dispatch>()
// 获取 models 中所有的状态
const store = useSelector( (state: RootState) => state )
const updateData = (payload: any) => {
dispatch({
type: 'demo/updateState',
payload,
})
dispatch.demo.updateState({ a: 1 })
}
return (
<React.Fragment>
<button onClick={()=>updateData({c:12})} >点击</button>
</React.Fragment>
)
}
export default Demo
贡献者
感谢所有的贡献者,欢迎开发者为开源项目贡献力量。
License
Licensed under the MIT License.