pc网站建设建议,网站开发是什么部门,搭建网站需要注意什么,北京外贸网站建设价格官网链接
umidva
文件目录
page 页面 index.tsx
models 每一个model文件都是需要挂在dva实例上的才会生效demo.ts
sevices 写接口的#xff08;这里就不写了#xff09;demo.ts实现一个简单的数据流向#xff0c;将数据存储到dva#xff0c;然后在页面使用
page/inde…官网链接
umidva
文件目录
page 页面 index.tsx
models 每一个model文件都是需要挂在dva实例上的才会生效demo.ts
sevices 写接口的这里就不写了demo.ts实现一个简单的数据流向将数据存储到dva然后在页面使用
page/index.tsx
import { connect } from umi;
import { useEffect } from react;
import { Dispatch, Action } from redux;interface demoProps {dispatch: DispatchAction| Demo/addCount
}const View (props:demoProps){useEffect((){let {count} props.Demoprops.dispatch({type:Demo/addCount,payload:{count,count}callback(){//获取回调的地方如果需要操作返回的新数据}})},[])return(h1{props.Demo.count}h1)
}connect(({Demo}){return Demo },(dispatch){return {dispatch}}
)(View)models/demo.ts
import { Effect } from dva;
import { Reducer } from redux;
interface DemoStateType{count: number,
}interface DemoType{namespace: string,state: DemoStateType,effects:{addCount: Effect,}reducer:{setDemoState: Reducer}
}export default Demo: Demotype{namespace:Demo,state: {count: 0,},effects: {*addCount: ({payload,callback}{put,call,select}){//payload 接收到的数据//callback 将数据返回页面//put 用于调用reducer//call 用于调用seveice文件里的接口//select 可以获取所有模块中存储的值put({type:setDemoState,playload})}},reducer: {setDemoState(state,{payload}){return {...state,...payload}}},subscriptions:{ //这里并没有使用setup({ dispatch, history }) {// 这里可以用return!-- 这里是整个model文件第一个执行的地方 --//return history.listen((location, action) {// if (location.pathname /users) {// dispatch({// type是用来写effects的函数名// type: effects_fnName// });}})}}
}
}
