dva中model的使用

       // import  { getAppList, addApp, delApp, getAppSet, setApp, resetSecret } from '../services/application'
		import * as appService from '../services/application'
		export default {

		namespace: 'application',

		 state: {
		  appDetail: {

			  },
			  secret: '111',
			  },

	  reducers: {
	    saveList(state, { payload }) {
	      return { ...state, list: payload.list, totalCount: payload.totalCount }
	    },

		    save(state, appDetail) {
		      return { ...state, appDetail }
		    },
		
		    saveSecret(state, { payload }) {
		      return {
		        ...state,
		        secret: payload
		      }
		    },
		
		    saveListDetail(state, { appDetail }) {
		      return {
		        ...state,
		        ListDetail: appDetail
		      }
		    },
		
		    //新增or更改
		    isadd(state, payload) {
		      return { ...state, ...payload }
		    }
		  },
		
		  effects: {
		    // 获取应用列表
		    *fetchAppList({ payload }, { call, put, select }) {
		      const resp = yield call(appService.getAppList, payload)
		      const list = resp.items;
		      const totalCount = resp.totalCount;
		      yield put({ type: 'saveList', payload: { list, totalCount } })
		    },
		
		    //添加应用
		    *addApplication({ payload }, { call, put, select }) {
		      const addAppResp = yield call(appService.addApp, payload)
		      if (addAppResp) {
		        yield put({ type: 'fetchAppList' })
		      }
		    },
		
		    //删除应用
		    *delApplication({ payload }, { call, put, select }) {
		      const respdel = yield call(appService.delApp, payload)
		      if (respdel) {
		        yield put({ type: 'fetchAppList' })
		      }
		    },
		
		    //获取应用详情
		    *fetchAppDetail({ payload }, { call, put, select }) {
		      const appDetail = yield call(appService.getAppSet, payload)
		      yield put({ type: 'saveListDetail', appDetail })
		
		    },
		
		    //设置修改详情
		    *setAppDetail({ setpayload }, { call, put }) {
		      const setAppResp = yield call(appService.setApp, setpayload)
		      if (setAppResp) {
		        yield put({
		          type: 'fetchAppDetail',
		          payload: setpayload.id
		        })
		      }
		    },
		
		    //重置secret
		    *resetSecret({ payload }, { call, put }) {
		      const restSecretResp = yield call(appService.resetSecret, payload)
		      if (restSecretResp) {
		        yield put({
		          type: 'saveSecret',
		          payload: restSecretResp.data
		        })
		      }
		    },
		
		    // app开关
		    *appEnable({ payload }, { call, put, select }) {
		      const appEnableResp = yield call(appService.appEnable, payload)
		      if (appEnableResp) {
		        yield put({ type: 'fetchAppList' })
		      }
		    },
		
		    *appDisable({ payload }, { call, put, select }) {
		      const appDisableResp = yield call(appService.appDisable, payload)
		      if (appDisableResp) {
		        yield put({ type: 'fetchAppList' })
		      }
		    }
		  },
		
		  subscriptions: {
		
		  },
		
		}
在React中使用dvamodel,首先需要了解dva是一个基于Redux和Redux-Saga的轻量级框架,它封装了Redux和Redux-Saga的复杂性,提供了一种更简洁的方式来组织应用的状态管理。在函数式组件中,通常会用到`useSelector`和`useDispatch`这两个Hooks来接入dvamodel。 以下是基本步骤: 1. 安装dva及其依赖项: ```bash npm install dva-core ``` 或者使用yarn: ```bash yarn add dva-core ``` 2. 使用`useDispatch` Hook来获取dispatch函数,然后调用model里面定义的namespace对应的reducers或saga: ```javascript import React from 'react'; import { useDispatch } from 'react-redux'; // 如果使用react-redux版本dva import { useModel } from 'dva-core'; // 如果直接使用dva-core function MyComponent() { const dispatch = useDispatch(); // 或者使用 dva 的方式获取dispatch // const { dispatch } = useModel('app'); // 假设有一个model定义了namespace为'counter',里面有reducer和saga const counterModel = useModel(state => state.counter); // 使用dispatch调用action const increase = () => { dispatch({ type: 'counter/increase', }); }; // 使用model中的state数据 return ( <div> <p>{counterModel.count}</p> <button onClick={increase}>Increase</button> </div> ); } export default MyComponent; ``` 在这个例子中,我们通过`useDispatch` Hook来获取Redux的dispatch函数,然后通过发送一个action来更新状态。而`useModel` Hook可以获取到model中定义的state状态。 3. 在dvamodel中定义namespace,reducer和saga: ```javascript // model定义 app.model({ namespace: 'counter', state: { count: 0, }, reducers: { increase(state) { return { ...state, count: state.count + 1 }; }, }, effects: { *decrease(action, { put }) { yield put({ type: 'increase' }); }, }, }); ``` 确保你的dva实例被正确创建并且在应用中被使用。通常,这是通过将你的根组件包裹在`<Provider>`标签内完成的。 ```javascript import { Provider } from 'react-redux'; // 如果使用react-redux版本dva import { Router, Route } from 'dva/router'; // 如果直接使用dva-core import React from 'react'; import ReactDOM from 'react-dom'; import dvaApp from './dva'; const { app, router } = dvaApp; ReactDOM.render( <Provider store={app._store}> {router} </Provider>, document.getElementById('root') ); ``` 请注意,如果你使用的是`dva-core`,那么你需要使用dva-core提供的`Router`和`Route`组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值