基于kos-core的表单封装


Keywords
kos, kos-core, redux, redux-form
License
Apache-2.0
Install
npm install kos-form@2.5.0

Documentation

KOS

一款基于react-redux的数据流管理框架,简单轻量,目标是在多端体系下均能使用,与单页和多页方案无关,KOS配合脚手架生成的应用模板,来提供单页多页应用的使用场景

KOS

KOS.use(middleware)

  • 说明: 新增middleware
  • 参数:
  • middleware: redux中间件
  • 返回值:

KOS.start(App,Container='#main')

  • 说明: 启动应用,单页应用和多页应用均调用这个API
  • 参数:
  • App: React.Component
  • Container: React.Component渲染到的DOM节点,默认是id为main的节点
  • 说明: 用于启动一个应用程序

KOS.Provider(App)

  • 说明: 获取Provider包裹的高阶组件,并完成store的初始化等动作
  • 参数:
  • App: React.Component

KOS.wrapperProps(props)

  • 说明: 用于给Component注入初始化的props,使用在扩展场景,当前的Component会注入
{
  dispatch,
  getNamespace,
  getParam,
}
  • 参数:
  • props: Object,例如:
{
  getForm:(formName)=>{
   const namespace = this.getNamespace();
   return Form.getForm(namespace,formName);
  }
}

注意:此处的函数作用域指向是Component的this.props

KOS.Wrapper(config)(Component)

  • 说明: 将Component使用Wrapper组件进行包装后,挂在到connect下面,用户将Model和View进行包装
  • 参数:
  • config.model: 需要绑定的model,model说明详见 Model
  • config.autoLoad: 在执行到Wrapper的componentDidMount的时候,是否自动执行Model.setup方法
  • 返回值: 和Model结合之后的高阶组件
  • 特别说明: 在项目中,通常建议的使用方式是:
import React from 'react';
import KOS form 'kos-core';
import model from './model';

@KOS.Wrapper({model})
const class App extends React.Component({
  render(){
    return <div></div>
  }
})

KOS.registerModel(mode)

  • 说明: 注册model,KOS.Wrapper高阶组件会调用
  • 参数:
  • model: 需要注册的model
  • 返回值: 返回Model对象,注意:此处的Model对象非KOS.Wrapper({model}),时传入的model

KOS.getModel(namespace)

  • 说明: 根据namespace获取Model对象
  • 参数:
  • namepace:

Model

日常书写的Model包含如下概念:

  • namespace: 命名空间,不能重复,初始化时会作为key,将model的initial挂载到store的state下
  • initial: state初始化数据,建议层级不要太深
  • reducers: Redux的reducer合集,用于处理同步的action
  • asyncs: 异步合集,用于处理异步的action
  • setup: 初始化的action处理,异步处理

书写代码示例

export default {
  initial:{
    name:'',
    list:[],
    params:{}
  },
  reducers:{
    setList(state,action){
      const {list,name,params} = state;
      const {payload} = action;

      return {
        ...state,
        ...payload.list
      };
    }
  },
  asyncs:{
    async loadList(dispatch,getState,action){
      const state = getState();
      const {list,name,params} = state;

      
    }
  }
}

API说明

Definition(@types/kos-core) change log

install: npm install @types/kos-core

2019-4-8: Update asyncs function's paramaters as unrequited to fit much more scenarios.

export interface KosModel<T = any> {
    ...;
    asyncs: {
        [key: string]: (dispatch: KosDispatch, getState: GetKosState<T>, action: Action) => void;
    };
    ...

to

export interface KosModel<T = any> {
    ...;
    asyncs: {
        [key: string]: (dispatch?: KosDispatch, getState?: GetKosState<T>, action?: { payload: T }) => void;
    };
    ...

2018-11-1: change

export interface KosModel<T = any> {
    ...;
    asyncs: {
        [key: string]: (dispatch: KosDispatch, getState?: GetKosState<T>) => void;
    };
    ...

to

export interface KosModel<T = any> {
    ...;
    asyncs: {
        [key: string]: (dispatch: KosDispatch, getState: GetKosState<T>, action: Action) => void;
    };
    ...