dva

DVA 简介

    dva是基于现有应用架构(redux+react-router+redux-saga等)的一层轻量封装,没有引入任何新的概念。

整个程序的入口文件是根目录下的index.js 文件

import dva from 'dva';
import { browserHistory } from 'dva/router';
import './index.css';


// 1. Initialize
const app = dva({
  history: browserHistory,
});
// 2. Plugins
// app.use({});

// 3. Model
app.model(require('./models/example'));

// 4. Router
app.router(require('./router'));

// 5. Start
app.start('#root');
dva-cli生成的文件给我们写的注释已经写的很清楚了

先初始化,在加载插件,在加载Model,在加载路由,最后启动程序


MVVC


(1)app.model(obj)

  • namespace : model 的命名空间
  • state: 初始state
  • reducers: 同步的修改状态的操作,由actions触发(state,action) => state
  • effects:异步的操作,并不直接修改state,由action触发,也可以调用actions。(action,{put,call,select})
  • subscriptions:异步的只读操作,并不直接修改state,可以调用actions。({ dispatch, history })

put(action)dispatch(action)
这里effects中的put(action)等同于subscriptions中的dispatch(action),它们的作用都是分发一个action。

yield put({ type: actionType, payload: attachedData, error: errorIfHave});
dispatch({ type: actionType, payload: attachedData, error: errorIfHave});

call(asyncFunction)
调用一个异步函数

const result = yield call(api.fetch, { page: 1 });

select(function)
从全局状态中选择数据

const count = yield select(state => state.count);

(2)app.router(({ history }) => routes)
import { Router, Route } from 'dva/routes';
app.router(({ history } => ({
  <Router history={ history }>
    <Route path="/" component={App} />
  </Router>
});







  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值