前言

实现通过单个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. Visual Studio Code使用Open In Browser打开的是记事本

    今天在家里学习前端开发,发现Visual Studio Code使用Open In Browser插件快速打开浏览器有问题,打开的是操作系统的记事本. 后来发现电脑的html文件默打开方式被改成了记事 ...

  2. J2EE项目工具集(转)

    1.支持重构,TDD, Debug J2EE应用和Flying Error提示的IDE a.重构:即使团队用的最多的只是Rename,Move,Extract Method等有限几个最基本的功能,但J ...

  3. HighChart利用servlet导出中文PNG图片乱码问题解决

    最近用到HighChart作图,在图片导出时,出现了图片中中文乱码的问题,在网络上找了很多资料,但都没有解决,最后才发现了最容易被忽略的问题.具体见下. 由于之前有同事使用过HighChart,所以毫 ...

  4. Http重要知识点

  5. 浅谈 @RequestParam 和@PathVariable

    版权声明:本文为博主原创文章,如果对你有用,敬请带走! https://blog.csdn.net/chuck_kui/article/details/55506723 首先 上两个地址: 地址①ht ...

  6. 一次查找sqlserver死锁的经历

    查找bug是程序员的家常便饭,我身边的人喜欢让用户来重现问题.当然他们也会从正式服务器上下载错误log,然后尝试分析log,不过当错误不是那种不经思考就可识别的情况,他们就会将问题推向用户,甚至怪罪程 ...

  7. 30分钟学会JS AST,打造自己的编译器

    这是一棵树嘛 直奔主题 抽象语法树是js代码另一种结构映射,可以将js拆解成AST,也可以把AST转成源代码.这中间的过程就是我们的用武之地. 利用 抽象语法树(AST) 可以对你的源代码进行修改.优 ...

  8. 【Leetcode】【Medium】Two Sum

    Given an array of integers, find two numbers such that they add up to a specific target number. The ...

  9. 在win7 windows 上编译 beego 上传到 linux 去执行

    在beego的项目目录下,执行: GOOS=linux GOARCH=amd64 go build So easy!但是却搞了好久! 参考连接:http://blog.csdn.net/changji ...

  10. Retrofit-入门使用

    1. 在模块目录下的build.gradle dependencies { compile "com.squareup.retrofit2:retrofit:2.1.0" comp ...