react-native中使用dva

下載  dva-core-ts  react-native

下面舉一個例子實現異步加載

創建models文件夾

--home.ts

import {Model,Effect,call,put} from 'dva-core-ts'
import {Reducer} from 'redux'
interface HomeState{
    num:number
}
interface HomeModel extends Model{
    namespace:'home';
    state:HomeState;
    reducers:{
        add:Reducer<HomeState>;
    },
    effects:{
        addAsync:Effect
    }
}
const initState={
    num:0
}
const asyncAdd=(time:number)=>{
    return new Promise((resolve)=>{
        setTimeout(resolve,time)
    })
}
const homeModel:HomeModel={
    namespace:'home',
    state:initState,
    reducers:{
        add(state=initState,{payload}){
            return {
                ...state,
                num:state.num+payload.num
            }
        }
    },
    effects:{
        *addAsync({payload},{call,put}){
            yield call(asyncAdd,3000)
            yield put({
                type:'add',
                payload
            })
        }
    }
}
export default homeModel

 

--index.ts

import home from './home'
import {DvaLoadingState} from 'dva-loading-ts'
const models=[home];
export type RootState={
    home: typeof home.state;
    loading:DvaLoadingState;
}
export default models

 

創建config文件夾

--dva.ts

import {create} from 'dva-core-ts'
import createLoading from 'dva-loading-ts'//加載中
import models from '@/models/index'
//創建實例
const app=create();
//加載model對象
models.forEach(model=>{
    app.model(model)
})
app.use(createLoading())
//啟動dva
app.start();
//導出
export default app._store;

在indextsx中引入store

import React from 'react'
import {Provider} from 'react-redux'
import store from '@/config/dva'
import  CreateStackNavigation from '@/navigator/createStackNavigation'
export default class extends React.Component{
    render (){
        return (
            <Provider store={store}>
                <CreateStackNavigation/>
            </Provider>
        )
    }
}

在組件中使用

import React from 'react'
import {View,Text,Button} from 'react-native'
import {connect, ConnectedProps} from 'react-redux'
import  { navigationProp } from '@/navigator/createStackNavigation'
import {RootState} from '@/models/index'


const mapState=({home,loading}:RootState)=>({
    num:home.num,
    loading:loading.effects['home/addAsync']
})
const connector=connect(mapState)
type MadelState=ConnectedProps<typeof connector>
interface Iprops extends MadelState{
    navigation:navigationProp
}
class Home extends React.Component<Iprops>{
    goDetail=()=>{
        const {navigation} =this.props
        navigation.navigate('Detail',{
            id:100
        })
    }
    add=()=>{
        const {dispatch}=this.props
        dispatch({
            type:'home/add',
            payload:{
                num:1
            }
        })
    }
    addAsync=()=>{
        const {dispatch}=this.props
        dispatch({
            type:'home/addAsync',
            payload:{
                num:11
            }
        })
    }
    render(){
        const {num,loading}=this.props
        return(
            <View>
                <Text>Home---{num}</Text>
                 <Button title="+1" onPress={this.add}/>
                 
                 <Text>{loading?'加載中':""}</Text>
                 <Button title="異步+1" onPress={this.addAsync}/>
                <Button title="去詳情" onPress={this.goDetail}/>
            </View>
        )
    }
}
export default connector(Home)