前言

实现通过单个component 单个router通过相应的标识对应产生不同model实现数据包分离,model namespce将会覆盖基础的Model,其中的model[state|subscriptions|effects|reducers] 将通过Object.assign进行复制( Object.assign({},obj,obj1) )将源对象里面的属性添加到目标对象中去,若两者的属性名有冲突,后面的将会覆盖前面的。

背景

在子路由中动态导入model, 因为model比较大, 需要在这个子页面加载的时候加载model, 另外这个可以通过modelExtend 动态生成model(即动态生成namespace)

在原文中的定义

The model.namespace will be overrided by latter model.
model[state|subscriptions|effects|reducers] will be merged as Object.assign.
model.state will be overrided be latter model if it isn't an object.

实例

1、通过history中的location 传唯一标识实现区别生成唯一的model的namespace

imoport BaseModel from '../model/BaseModel'
import dynamic from 'dva/dynamic';// 通过dynamic实现动态加载路由、model
import modelExtend from 'dva-model-extend';
const dynamicWrapperCreateNewModel = (app, component, history) => dynamic({
app,
models: () => [modelExtend(BaseModel, { namespace: `createNewModel-${history.location.state.id}` })],
component,
});

2、在路由列表中添加路由

{
name: '路由',
path: 'BaseInstance',
component: dynamicWrapperCreateTab(app, () => import('../routes/OnlyRouter/BillBaseInstance'), history),
},

3、在UI中添加connect 生成器 连接动态生成的model

@connect(state => ({
myModel: state[`createNewModel-${history.state.state.id}`],
}))

4、通过React-Router4.0 跳转机制跳转到到路由

通过Link的方式传递id

import { Link } from 'dva/router';
<Link
to={{
pathname: this.props.path, // 传递path
state: { id: this.props.pathId }, 传递id 标识
}}
>

通过routerRedux的方式传递id

import { routerRedux } from 'dva/router';
yield put(routerRedux.replace({
pathname: '/dashboard/BaseInstance',
state: { // 标识
id: '0B64AF10-F1D0-6CD0-647F-160C50326F9D',
},
}));

  

React通过dva-model-extend实现 dva 动态生成 model的更多相关文章

  1. 懒人小工具:自动生成Model,Insert,Select,Delete以及导出Excel的方法

    在开发的过程中,我们为了节约时间,往往会将大量重复机械的代码封装,考虑代码的复用性,这样我们可以节约很多时间来做别的事情.最近跳槽到一节webform开发的公司,主要是开发自己公司用的ERP.开始因为 ...

  2. 懒人小工具1:winform自动生成Model,Insert,Select,Delete以及导出Excel的方法

       懒人小工具2:T4自动生成Model,Insert,Select,Delete以及导出Excel的方法    github地址:https://github.com/Jimmey-Jiang/J ...

  3. react将表格动态生成视频列表【代码】【案例】

    只需要创建一个表格,id为videos,react就能将这个表格转换成视频列表,并点击自动播放 index.html <!DOCTYPE html> <html> <he ...

  4. vue中动态循环model

    vue动态循环model与angular有所不同,angular直接定义一个数组,然后传入循环列表的index即可. 而vue不仅需要定义一个数组,还需要通过接口读出循环的数组长度,然后在create ...

  5. 关于动态生成data组件

    /*! * WeX5 v3 (http://www.justep.com) * Copyright 2015 Justep, Inc. * Licensed under Apache License, ...

  6. Skywalking-09:OAL原理——如何通过动态生成的Class类保存数据

    OAL 如何通过动态生成的 Class 类,保存数据 前置工作 OAL 如何将动态生成的 SourceDispatcher 添加到 DispatcherManager // org.apache.sk ...

  7. 即使用ADO.NET,也要轻量级动态生成更新SQL,比Ormlite性能更高

    先上测试结果: //测试1000次针对同一个表同一个字段更新,比Ormlite平均快2.34倍 //生成SQL+ExecuteNonQuery Ormlite 倍数 //6513ms 15158ms ...

  8. 在后台代码中动态生成pivot项并设置EventTrigger和Action的绑定

    最近在做今日头条WP的过程中,遇到需要动态生成Pivot项的问题.第一个版本是把几个频道写死在xaml里了,事件绑定也写在xaml里,每个频道绑定一个ObservableCollection<A ...

  9. MVC5+EF6 入门完整教程13 -- 动态生成多级菜单

    稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...

随机推荐

  1. 【热门活动】开年好运开门来!送祝福,赢iPad

    羊年新的云端征程起航,阿里云邀请了众多云上客户给大家送祝福啦,听听他们的寄语,用云计算增强你的竞争力,一起赢在云端! 想赢iPad吗?参与我们的微博活动,和大家一起送上云端祝福,就有机会把iPad带回 ...

  2. C#——DataGridView选中行,在TextBox中显示选中行的内容

    C#--DataGridView选中行,在TextBox中显示选中行的内容,在DataGridView的SelectionChanged实践中设置如下代码 private void dataGridV ...

  3. 实验一:使用符号执行工具klee对软件进行破解(来自于klee官网)

    原文地址:https://gitlab.com/Manouchehri/Matryoshka-Stage-2/blob/master/stage2.md 实验用代码下载地址:https://gitla ...

  4. GIT团队合作探讨之二--Pull Request

    pull request是github/bitbucket给开发人员实现便利合作提供的一个feature.他们提供一个用户友好的web界面在进代码之前来讨论这些变更. 简单说,pull request ...

  5. C++程序运行时间-ZZ

    [15.5.25]贴一段实用的代码,linux下跑过. #include <stdio.h> /* printf */ #include <time.h> /* clock_t ...

  6. sqlserver索引维护(重新组织生成索引)

    sqlserver索引的维护 1:查看索引碎片大于百分三十以上的索引 select object_id= object_id,indexid = index_id,partitionnum = par ...

  7. window 服务注册、卸载

    1.以管理员身份打开 命令窗口 2.服务注册命令:sc create myServer binpath= path 3.服务卸载命令:sc delete myServer Topshelf 服务安装 ...

  8. ubuntu桌面便签 sticky note, xpad

    sudo apt-get install xpad 软件有一个选项,叫做Show window decorations,显示窗口的标题栏.

  9. gulp使用方法总结

    gulp是用于前端构建的基于文件流的一套工具.可以用于压缩.编译.合并.检查文件等操作.可以节省大量的用于繁琐重复操作的人力.最开始就是安装gulp工具了,在命令行中切换到工作的文件目录下,安装gul ...

  10. MySQL语法三:数据控制语句

    数据控制语句MCL(GRANT,REVOKE,COMMIT,ROLLBACK)