dva model数据管理

1、在model文件夹下创建.js文件其中这些文件会识别为model文件src/models下的文件src/pages/models下的文件src/pages下所有model.ts文件2、创建model(即reducer)export default{namespace:'model名称',state:数据初始值,   其中:优先级低于app中设置的初始值const app = dva({initialState: { count: 1 },});reducers:{  同步方法xx(state,action){改变state的方法},xxx(state,action){改变state的方法}},effects:{  异步方法*xx({获取参数名1,获取参数名2,...},{call,put}){const res=yield call(异步方法,参数1,参数2,...);异步请求数据后,调用同步方法改变model中的数据yield put({type:'同步方法名',数据})}},subscriptions:{  订阅监听,在app.start()时被执行xx({ history, dispatch }) {监听路由history.listen(({ pathname }) => { if (pathname === '/') {...dispatch({ type: 'xx' });}});监听窗口变化window.onresize=()=>{...}}}3、在主入口文件index.js中注册modelapp.model(require('./models/model文件').default);4、组件连接model(和react-redux写法相同)import {connect} from 'dva'import React,{Component} from 'react'import {connect} from 'dva'class App extends Component{render(){...}}获取model中的状态const mapStateToProps=(state)=>{return {productList:state.模块名}}分发action(若添加了该参数,则this.props.dispatch无效,不添加可以获取)const mapDispatchToProps=(dispatch)=>{return {x(){dispatch({type:'模块名/方法名',数据})}}}this.props.名称调用export default connect(mapStateToProps,mapDispatchToProps)(App)5、合并多个model(1)在models下创建index.js入口文件,并添加以下内容const context=require.context('./',false,/\.js$/);export default context.keys().filter(item=>item!=='./index.js').map(key=>context(key));(2)在index主入口文件,修改app.model为require('./models').default.forEach(key=>app.model(key.default));

代码示例:
model:

import * as api from '../services/example'export default{namespace:'product',state:{productList:[{name:'jeff'},{name:'jack'}]},reducers:{updateList(state,action){let currenProductList=deepClone(state);currenProductList.productList.push(action.payload);return currenProductList;}},effects:{*asyncFun({payload},{call,put}){yield put({type:'updateList',payload})},*asyncPro({payload},{call,put}){const res=yield call(api.getProduct,payload);yield put({type:'updateList',payload:res.data})}},subscriptions: {setup({ history, dispatch, }) {// 监听 history 变化，当进入 `/` 时触发 `load` actionhistory.listen(({ pathname }) => {if (pathname === '/') {console.log('aa');//   dispatch({ type: 'load' });}});}}
}//深拷贝方法
function deepClone(arr){let _obj=JSON.stringify(arr),objClone=JSON.parse(_obj);return objClone;
}

组件:

import React,{Component} from 'react'
import {connect} from 'dva'
import Product from '../../components/Product'
import {Link,NavLink,routerRedux} from 'dva/router'class App extends Component{go=()=>{this.props.history.push('/');}go2=()=>{this.props.dispatch(routerRedux.push('/'));}go3=()=>{this.props.addAsync({name:'eason'});}render(){const {productList,dispatch}=this.propsreturn(<div><Product dispatch={dispatch} productList={productList}/><button onClick={()=>{this.props.add()}}>添加2</button><Link to='/'>跳转</Link><NavLink to='/'>跳转2</NavLink><button onClick={this.go}>编程式跳转</button><button onClick={this.go2}>router-redux</button><button onClick={this.go3}>异步</button></div>)}
}const mapStateToProps=(state)=>{return {productList:state.product}
}const mapDispatchToProps=(dispatch)=>{return {add(){dispatch({type:'product/updateList',payload:{name:'tom'}})},addAsync(payload){console.log(payload);dispatch({type:'product/asyncFun',payload:payload})}}
}export default connect(mapStateToProps,mapDispatchToProps)(App)

index.js:

import dva from 'dva';
import './index.css';
// import createHistory from 'history/createBrowserHistory';
import { createBrowserHistory as createHistory } from 'history';// 1. Initialize
const app = dva({history: createHistory(),
});
// const app=dva();// 2. Plugins
// app.use({});// 3. Model
app.model(require('./models/example').default);
app.model(require('./models/product').default);// 4. Router
app.router(require('./router').default);// 5. Start
app.start('#root');

dva model数据管理相关推荐

Dva model层的自己的理解
刚接触Dva的时候,对于model感觉一片茫然,看不懂不知道是什么意思.在之后的公司一个项目中慢慢的对model有了基本的理解. model.js: model层一般包含几个部分: namespace ...
dva model里面的effects函数可以调用effects函数
在fetchIndCreate函数中调用refreshTree函数: effects: { *refreshTree({ payload }, { call, put }){const datas = ...
dva 打包多个html,使用dva+umi+antd构建页面（一）
使用dva+umi+antd构建页面首先确保安装npm或者yarnhtml 建立新应用首先建立应用目录node mkdir myapp && cd myapp 推荐使用 yarn ...
dcmm认证的条件_DCMM认证数据管理能力成熟度模型评估
DCMM认证数据管理能力成熟度评估模型添加时间:2020-04-01 16:00:04 浏览: DCMM认证:数据管理能力成熟度评估模型(Data Management Capability ...
200行代码写一个简易的dva
在美团实习的时候,第一次接触到dva这样的react框架,回学校的时候,就想有机会自己实现一下这样的框架,虽然自己水平有限,但是可以试一试哈. 目标是实现dva model的同步和异步 dispatc ...
dva源码解析（一）
转载 :原文 https://blog.csdn.net/zp1996323/article/details/73315096 写在前面 dva是蚂蚁金服推出的一个单页应用框架,对redux,reac ...
dva的用法_dva入门讲解
这里有一份简洁的前端知识体系等待你查收,看看吧,会有惊喜哦~如果觉得不错,恳求star哈~ dva是什么? DVA 是基于 redux.redux-saga 和 react-router 的轻量级前端 ...
dva的简单使用（一）
一.前言在实际的前端开发中,像 cardList 中包含的那些数据,一般都是通过发起异步 http 请求从后端服务中获得. 我们希望把数据逻辑(cardList 相关逻辑)和视图逻辑(PuzzleC ...
关于umi dva的使用
1.配置,在config.js中开启配置 dva: {immer: true, // 表示是否启用 immer 以方便修改 reducerhmr: true, // 表示是否启用 dva model ...

dva model数据管理

dva model数据管理相关推荐

最新文章

热门文章