Reactdva的使⽤
各⼤传送门：
了解 dva
- dva = React-Router + Redux + Redux-saga + fetch
- dva的初衷是（其实应该是redux的初衷）。提供⼀个公共的顶层的状态管理⼯具，专门为view层服务（实现双向数据流），⽽让react只专注专⼼负责渲染view层。
dva项⽬⼊⼝初始化
在初始化的时候，指定使⽤的路由模式，这⾥使⽤了hash模式。
import dva from'dva';
import createHistory from'history/createHashHistory';
// user BrowserHistory
// import createHistory from 'history/createBrowserHistory';
// 1. Initialize
const app = dva({
history: createHistory(),
});
dva的⼏个规则:
1、通过dispatch调⽤namespace/effects
2、state(状态)
3、effects (异步操作)
- 函数必须带*，也就是⽣成器。
- 第⼀个参数，可以拓展为{payload, callback}
- 第⼆个参数，call和put
-
call 就是调⽤ async的action函数
- put就是调⽤reducers的函数来更新state。
4、reducers
5、dva是以model为单位的，所有的应⽤逻辑都在上⾯
简⽽⾔之总结⼀下吧。开发dva分为两个阶段：
1、准备阶段：
- 定义 state 状态，⽤以绑定到 view 层；
- 定义 effects
- call⽤来调⽤ action，类似dispatch
- put⽤来调⽤reducers
- 定义 sync action 函数，⽤来进⾏异步请求；
-
定义 reducers 函数，⽤来更新 state。
2、调⽤阶段：
拿到dispatch
const { dispatch } = this.props
dispatch({type: 'count/add'}) // this.props.dispatch({type: 'count/add'})
可以直接调⽤ effects，也可以直接调⽤reducers。如果是同名的话，会⼀起调⽤。优先执⾏reducers。
【dispatch ⽅法从哪⾥来？被 connect 的 Component 会⾃动在 props 中拥有 dispatch ⽅法。】
简单⽰例伪代码
/**
* ⼀、index.js 调⽤⽰例
handleClick () {
const { dispatch } = this.props
dispatch({ type: 'todo/save' }
}
⼆、async func ⽰例
export async function saveTodoToServer(codetype) {
return request(/api/framework/sys/code/list?codetype= + codetype);
}
*/
export default {
namespace: 'todo',
state: {}, // 也可以是数组： []
effects: {
*save({ payload, callback }, { put, call }) {
// 调⽤ async func saveTodoToServer
yield call(saveTodoToServer, todo);
// 调⽤ reducers 更新 state 可以⾃由传递任何参数，必须保留type
yield put({ type: 'add', title: payload.title, text: payload: text, time: payload: time });        },
},
reducers: {
// ⽐较推荐es6的这样写：add(state, { title, text, time })
add(state, action) {
const title = action.title
const text =
const todo = {
title: action.title,
text: ,
time: action.time
}
// 保存数据到 state
return {...state, todo};
},
},
react router路由传参}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。