Package Exports

@uiw-admin/models
@uiw-admin/models/esm/index.js
@uiw-admin/models/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw-admin/models) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

整合 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.