dva做数据管理

2022-05-01 22:00:08 阅读：240 来源： 互联网

标签：count const dva testModel state 数据管理 return payload

dva 基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，今天就讲一下具体的使用

实现的效果：计算器的同步增减及异步修改数据

1.创建ui component

return (
        <>
            <div>
                测试组件
                Option：<input ref={inputRef} defaultValue={0} />
                <br/>
                <div>变量：{count || 0}</div>
                <button onClick={handleAdd}>同步+</button>
                <button onClick={handleReduce}>同步-</button>
                <button onClick={handleAsync}>异步+</button>
                <hr/>
            </div>
        </>
    )

2.创建model（5个api）

const TestModel={
    namespace:"testModel", 　　　　　　// 命名空间，model数据做隔离
    state:{                          // 变量存储，尽量扁平化处理，不要嵌套层级多
        count:1, 
    },
    reducers:{                    　　// 同redux中的reducer模块，以key/value定义reducer。用于处理同步操作，唯一可以修改 state 的地方。由 action 触发
        add(state, { payload}) {
            const count = state.count + payload
            return {...state,count:count}
        },
        reduce(state,{payload}) {
            const count = state.count - payload
            return {...state,count:count}
        },
    },
    effects:{                        // 以 key/value 格式定义 effect。处理异步操作，不直接修改 state。由 action 触发，可以触发 action，可以和服务器交互...
        *changeAsync(_, {call,put}) {
            yield call(delay,500)
            yield put({type:'add',payload:2})
        }
    },

  　// 以 key/value 格式定义 subscription。subscription 是订阅，用于订阅一个数据源，然后根据需要 dispatch 相应的 action。在 app.start() 时被执行，数据源　　　　　　              可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。
　　　　subscriptions: {                       
        　　setup({ dispatch, history }, done) {
            　　return history.listen((location) => {
                　　if (
                   　　location.pathname === 'xxx' ) {
                   　　dispatch({type:'XXX',payload:XXX})
                　　}              
            });
        },
    },

3.connect连接:引入connect模块

import {connect} from 'dva'

export default connect(({testModel})=>(
    {
        count:testModel.count,
    }
))(Index)

4.组件内部使用

① 获取dva存储的变量:组件自带dispact方法和转换后的变量

　const Index= (dispatch,state1,state2...)=>{

　}

② 组件内部修改数据通过dispatch方法

　dispatch({

　　type:[namespace]/同步reducer或异步的effects名,

　　payload:传入的参数

　})

5.完整代码

test.js

import React,{useRef,useState,useEffect} from 'react'
import {connect} from 'dva'

const ChildComp = (props) =>{
    const {userName,userAge} = props
    return <>   
        <p>ChildComp子页面获取数据</p>
        <div>子页面获取到的姓名：{userName}</div>
        <div>子页面获取的年龄：{userAge}</div>
    </>
}
const Index=({dispatch,count,userName,userAge})=> {
    const inputRef = useRef()
    useEffect(()=>{
        // console.log('count数据变化了')
        return () =>{

        }   
    },[count]) 
    const handleAdd = () =>{
        dispatch({type:'testModel/add',payload:Number(inputRef.current.value)})
    }
    const handleReduce = ()=>{
        dispatch({
            type:'testModel/reduce',
            payload:Number(inputRef.current.value)
        })
    }
    const handleAsync = ()=>{
        dispatch({type:'testModel/changeAsync',payload:Number(inputRef.current.value)})
    }
    return (
        <>
            <div>
                测试组件
                Option：<input ref={inputRef} defaultValue={0} />
                <br/>
                <div>变量：{count || 0}</div>
                <button onClick={handleAdd}>同步+</button>
                <button onClick={handleReduce}>同步-</button>
                <button onClick={handleAsync}>异步+</button>
                <hr/>
            </div>
        </>
    )
}
// const mapStateToProps= (state) =>{
//     return {
//         count:state.testModel.count,
//         userName:state.testModel.userName,
//         userAge: state.testModel.userAge
//     }
// }
export default connect(({testModel})=>(
    {
        count:testModel.count,
        userName:testModel.userName,
        userAge:testModel.userAge
    }
))(Index)

model

const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));

const TestModel={
    namespace:"testModel",
    state:{
        count:1,
        userName:'wang'
    },
    reducers:{
        add(state, { payload}) {
            const count = state.count + payload
            return {...state,count:count}
        },
        reduce(state,{payload}) {
            const count = state.count - payload
            return {...state,count:count}
        },
        changeUserName(state,{payload}) {
            return {...state,...payload}
        }
    },
    effects:{
        *changeAsync(_, {call,put}) {
            yield call(delay,500)
            yield put({type:'add',payload:2})
        }
    }
}
export default TestModel

　界面效果:

return (
        <>
            <div>
                测试组件
                Option：<input ref={inputRef} defaultValue={0} />
                <br/>
                <div>变量：{count || 0}</div>
                <button onClick={handleAdd}>同步+</button>
                <button onClick={handleReduce}>同步-</button>
                <button onClick={handleAsync}>异步+</button>
                <hr/>
            </div>
        </>
    )

subscriptions: { setup({ dispatch, history }, done) { return history.listen((location) => { if ( location.pathname === '/app/admin/weak/vuln' || location.pathname === '/app/admin/weak/vuln/hostadd' || location.pathname.indexOf('/app/admin/weak/vuln/host/') !== -1 ) { dispatch({ type: 'init', payload: { vulnInstanceType: 'serviceManage', }, }); } if ( location.pathname === '/app/admin/weak/vuln/website' || location.pathname === '/app/admin/weak/vuln/websiteadd' || location.pathname.indexOf('/app/admin/weak/vuln/website') !== -1 ) { dispatch({ type: 'init', payload: { vulnInstanceType: 'webserviceManage', }, }); } }); }, },

标签：count,const,dva,testModel,state,数据管理,return,payload
来源： https://www.cnblogs.com/cjechenjinge-0820/p/16214246.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

dva做数据管理