react-native中使用dva

下载 dva-core-ts react-native

下面举一个例子实现异步加载

创建models文件夹

--home.ts

 1 import {Model,Effect,call,put} from 'dva-core-ts'
 2 import {Reducer} from 'redux'
 3 interface HomeState{
 4     num:number
 5 }
 6 interface HomeModel extends Model{
 7     namespace:'home';
 8     state:HomeState;
 9     reducers:{
10         add:Reducer<HomeState>;
11     },
12     effects:{
13         addAsync:Effect
14     }
15 }
16 const initState={
17     num:0
18 }
19 const asyncAdd=(time:number)=>{
20     return new Promise((resolve)=>{
21         setTimeout(resolve,time)
22     })
23 }
24 const homeModel:HomeModel={
25     namespace:'home',
26     state:initState,
27     reducers:{
28         add(state=initState,{payload}){
29             return {
30                 ...state,
31                 num:state.num+payload.num
32             }
33         }
34     },
35     effects:{
36         *addAsync({payload},{call,put}){
37             yield call(asyncAdd,3000)
38             yield put({
39                 type:'add',
40                 payload
41             })
42         }
43     }
44 }
45 export default homeModel

--index.ts

1 import home from './home'
2 import {DvaLoadingState} from 'dva-loading-ts'
3 const models=[home];
4 export type RootState={
5     home: typeof home.state;
6     loading:DvaLoadingState;
7 }
8 export default models

创建config文件夹

--dva.ts

 1 import {create} from 'dva-core-ts'
 2 import createLoading from 'dva-loading-ts'//加载中
 3 import models from '@/models/index'
 4 //创建实例
 5 const app=create();
 6 //加载model对象
 7 models.forEach(model=>{
 8     app.model(model)
 9 })
10 app.use(createLoading())
11 //启动dva
12 app.start();
13 //导出
14 export default app._store;

在indextsx中引入store

 1 import React from 'react'
 2 import {Provider} from 'react-redux'
 3 import store from '@/config/dva'
 4 import  CreateStackNavigation from '@/navigator/createStackNavigation'
 5 export default class extends React.Component{
 6     render (){
 7         return (
 8             <Provider store={store}>
 9                 <CreateStackNavigation/>
10             </Provider>
11         )
12     }
13 }

在组件中使用

 1 import React from 'react'
 2 import {View,Text,Button} from 'react-native'
 3 import {connect, ConnectedProps} from 'react-redux'
 4 import  { navigationProp } from '@/navigator/createStackNavigation'
 5 import {RootState} from '@/models/index'
 6 
 7 
 8 const mapState=({home,loading}:RootState)=>({
 9     num:home.num,
10     loading:loading.effects['home/addAsync']
11 })
12 const connector=connect(mapState)
13 type MadelState=ConnectedProps<typeof connector>
14 interface Iprops extends MadelState{
15     navigation:navigationProp
16 }
17 class Home extends React.Component<Iprops>{
18     goDetail=()=>{
19         const {navigation} =this.props
20         navigation.navigate('Detail',{
21             id:100
22         })
23     }
24     add=()=>{
25         const {dispatch}=this.props
26         dispatch({
27             type:'home/add',
28             payload:{
29                 num:1
30             }
31         })
32     }
33     addAsync=()=>{
34         const {dispatch}=this.props
35         dispatch({
36             type:'home/addAsync',
37             payload:{
38                 num:11
39             }
40         })
41     }
42     render(){
43         const {num,loading}=this.props
44         return(
45             <View>
46                 <Text>Home---{num}</Text>
47                  <Button title="+1" onPress={this.add}/>
48                  
49                  <Text>{loading?'加载中':""}</Text>
50                  <Button title="异步+1" onPress={this.addAsync}/>
51                 <Button title="去详情" onPress={this.goDetail}/>
52             </View>
53         )
54     }
55 }
56 export default connector(Home)