Dva的数据流向

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

Dva中的数据流向:

数据的改变通过是通过用户交互行为或者浏览器行为(如:路由跳转等)触发的。
图解:
image.png
描述:
当此类行为会改变数据的时候,可以通过dispatch发起一个action:
(1)同步行为------>直接通过reducers改变state
(2)异步行为------>先触发effects然后流向reducers最终改变state

Model中的参数:

State 表示状态数据,是一个对象。
Action 是一个普通的JavaScript对象,它是改变State的唯一路径。无论是UI事件、网络回调,还是WebSocket等数据源所获取的数据,最终都会通过dispatch函数调用一个action,从而改变对应的数据。action必须带有type属性指明具体的行为,其他字段可以自定义,如果要发起一个action需要使用dispatch函数;dispatch是在组件connect Models以后,通过props传入的。

this.props.dispatch({
    type:''
})

image.png

dispatch 函数用于触发action的函数,action是改变state的唯一途径,但是它只描述了一个行为,而dispatch可以看作是触发这个行为的方式,而reducer则是描述如何改变数据的。
Subscription 订阅,用于订阅一个数据源,然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

Model中的数据:例子

import {reqCnode} from '../services/example'
export default{
    namespace:'IndexText',
    state:{
        name:'西柚',
        cNodeData:[]
    },
    reducers:{
        setName(state,payLoad){
            let _state = JSON.parse(JSON.stringify(state));
            _state.name = payLoad.payLoad.name;
            return _state;
        },
        setCnodeData(state,payLoad){
            let _state = JSON.parse(JSON.stringify(state));
            _state.cNodeData = payLoad.data
            return _state;
        },
        testSubscript(state,payLoad){
            console.log('我是用户页面')
            return state
        }
    },
    effects:{
        *reqCnodeFn({payLoad},{put,call}){
            const result = yield call(reqCnode);
            if(result.data){
                yield put({
                    type:'setCnodeData',
                    data:result.data.data
                })
            }
        }
    },
    subscriptions:{
        hello({dispatch,history}){
            history.listen(({pathname})=>{
                if(pathname === '/user'){
                    dispatch({
                        type:'testSubscript'
                    })
                }
            })
        }
    }
}


觉得对自己有帮助就点个赞

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看