React通过dva-model-extend实现 dva 动态生成 model
前言
实现通过单个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的更多相关文章
- 懒人小工具:自动生成Model,Insert,Select,Delete以及导出Excel的方法
在开发的过程中,我们为了节约时间,往往会将大量重复机械的代码封装,考虑代码的复用性,这样我们可以节约很多时间来做别的事情.最近跳槽到一节webform开发的公司,主要是开发自己公司用的ERP.开始因为 ...
- 懒人小工具1:winform自动生成Model,Insert,Select,Delete以及导出Excel的方法
懒人小工具2:T4自动生成Model,Insert,Select,Delete以及导出Excel的方法 github地址:https://github.com/Jimmey-Jiang/J ...
- react将表格动态生成视频列表【代码】【案例】
只需要创建一个表格,id为videos,react就能将这个表格转换成视频列表,并点击自动播放 index.html <!DOCTYPE html> <html> <he ...
- vue中动态循环model
vue动态循环model与angular有所不同,angular直接定义一个数组,然后传入循环列表的index即可. 而vue不仅需要定义一个数组,还需要通过接口读出循环的数组长度,然后在create ...
- 关于动态生成data组件
/*! * WeX5 v3 (http://www.justep.com) * Copyright 2015 Justep, Inc. * Licensed under Apache License, ...
- Skywalking-09:OAL原理——如何通过动态生成的Class类保存数据
OAL 如何通过动态生成的 Class 类,保存数据 前置工作 OAL 如何将动态生成的 SourceDispatcher 添加到 DispatcherManager // org.apache.sk ...
- 即使用ADO.NET,也要轻量级动态生成更新SQL,比Ormlite性能更高
先上测试结果: //测试1000次针对同一个表同一个字段更新,比Ormlite平均快2.34倍 //生成SQL+ExecuteNonQuery Ormlite 倍数 //6513ms 15158ms ...
- 在后台代码中动态生成pivot项并设置EventTrigger和Action的绑定
最近在做今日头条WP的过程中,遇到需要动态生成Pivot项的问题.第一个版本是把几个频道写死在xaml里了,事件绑定也写在xaml里,每个频道绑定一个ObservableCollection<A ...
- MVC5+EF6 入门完整教程13 -- 动态生成多级菜单
稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...
随机推荐
- 【热门活动】开年好运开门来!送祝福,赢iPad
羊年新的云端征程起航,阿里云邀请了众多云上客户给大家送祝福啦,听听他们的寄语,用云计算增强你的竞争力,一起赢在云端! 想赢iPad吗?参与我们的微博活动,和大家一起送上云端祝福,就有机会把iPad带回 ...
- C#——DataGridView选中行,在TextBox中显示选中行的内容
C#--DataGridView选中行,在TextBox中显示选中行的内容,在DataGridView的SelectionChanged实践中设置如下代码 private void dataGridV ...
- 实验一:使用符号执行工具klee对软件进行破解(来自于klee官网)
原文地址:https://gitlab.com/Manouchehri/Matryoshka-Stage-2/blob/master/stage2.md 实验用代码下载地址:https://gitla ...
- GIT团队合作探讨之二--Pull Request
pull request是github/bitbucket给开发人员实现便利合作提供的一个feature.他们提供一个用户友好的web界面在进代码之前来讨论这些变更. 简单说,pull request ...
- C++程序运行时间-ZZ
[15.5.25]贴一段实用的代码,linux下跑过. #include <stdio.h> /* printf */ #include <time.h> /* clock_t ...
- sqlserver索引维护(重新组织生成索引)
sqlserver索引的维护 1:查看索引碎片大于百分三十以上的索引 select object_id= object_id,indexid = index_id,partitionnum = par ...
- window 服务注册、卸载
1.以管理员身份打开 命令窗口 2.服务注册命令:sc create myServer binpath= path 3.服务卸载命令:sc delete myServer Topshelf 服务安装 ...
- ubuntu桌面便签 sticky note, xpad
sudo apt-get install xpad 软件有一个选项,叫做Show window decorations,显示窗口的标题栏.
- gulp使用方法总结
gulp是用于前端构建的基于文件流的一套工具.可以用于压缩.编译.合并.检查文件等操作.可以节省大量的用于繁琐重复操作的人力.最开始就是安装gulp工具了,在命令行中切换到工作的文件目录下,安装gul ...
- MySQL语法三:数据控制语句
数据控制语句MCL(GRANT,REVOKE,COMMIT,ROLLBACK)