Dva的数据流向

皈依

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'
                    })
                }
            })
        }
    }
}

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

阅读 2.1k
6 声望
1 粉丝
0 条评论
6 声望
1 粉丝
文章目录
宣传栏