admin 管理员组

文章数量: 1087652

006.集成Dva

  • 安装
yarn add dva-core-ts react-redux
yarn add @types/react-redux -D
yarn add dva-loading-ts


  • 在models模块下配置 页面所需要的dva数据操作类（例如：home.ts）
import { Model, Effect } from 'dva-core-ts'
import { Reducer } from 'redux'type HomeState = {num: number
}interface HomeModelType extends Model {namespace: stringstate: HomeState;//封装后台返回的数据effects: {asyncAdd: Effect;};reducers: {getAdd: Reducer<HomeState>,};
}const HomeModel: HomeModelType = {namespace: 'home',state: {num: 1},//异步effects: {*asyncAdd({ payload }, { call, put }) {// const response = yield call(getUserInfo, { ...payload })// if (response && response instanceof Object) {//     yield put({//         type: 'getAdd',//         payload: response.data//     })// }yield call(()=>new Promise(resolve => setTimeout(resolve, 3000)))yield put({type: 'getAdd',payload: payload})},},//同步reducers: {getAdd(state, action) {action.payload.num = state?.num + action.payload.numreturn {...state,...action.payload,};},}
}export default HomeModel
  • 在models模块下统一处理dva操作（index.ts）
import home from './home'
import { DvaLoadingState } from 'dva-loading-ts'const models = [home]export type RootState= {home: typeof home.state;//typeof可以自动推导出home的类型loading: DvaLoadingState
}export default models
  • 在config目录下创建dva.ts（创建dva实例）
import { create } from 'dva-core-ts'
import createLoading from 'dva-loading-ts'
import models from '@/models/index'// 1.创建实例
const app = create()// 2.加载modal对象
models.forEach(model => {app.model(model)
});
app.use(createLoading())
// 3.启动dva
app.start()// 4.导出dva的数据export default app._store
  • 在src目录下index.tsx入口文件中配置store入口

import React, { Component } from 'react';
import Navgator from '@/navigator/index'
import { Provider } from 'react-redux'
import store from '@/config/dva'
// export default Navgatorclass index extends Component {render() {return (<Provider store={store}><Navgator /></Provider>);}
}export default index;
  • 在home.tsx页面中使用dva
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import { RootStackNavigation } from '@/navigator/index'
// 使用dva
import { connect } from 'react-redux'
import type { ConnectedProps } from 'react-redux'
import type { RootState} from '@/models/index'// 关联dva
const mapStateToProps = ({ home, loading }: RootState) => {return {datas: home,//这里的home就是model中的namespaceloading: loading.effects['home/asyncAdd'] //指定哪个方法需要显示loading判断}
}
//这里需要connect对象
const connector = connect(mapStateToProps)
//自动推导dva中的state类型
type ModelState= ConnectedProps<typeof connector>// 这里需要继承ModelState ，区别于antd pro中的umi.js  umi不需要
// antd umi.js中使用dva：
interface IProps extends ModelState{navigation: RootStackNavigation
}class Home extends Component<IProps> {// 跳转详情页onPress = () => {const { navigation } = this.propsnavigation.navigate("Detail", { id: 18 })}//dva加法onHandleAdd = () => {const { dispatch } = this.propsdispatch({type: 'home/asyncAdd',payload: {num: 8}})}render() {const { datas, loading } = this.propsreturn (<View><Text>首页{datas.num}</Text><Text>{loading?'正在加载中...':''}</Text><Button title="dva加法" onPress={this.onHandleAdd}></Button><Button title='跳转详情页' onPress={this.onPress}></Button></View>);}
}// export default Home;
export default connector(Home)
  • 效果

本文标签： 006集成Dva

版权声明：本文标题：006.集成Dva 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687942873a160298.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。