學習了dva,感覺好棒,在使用redex、redux-thunk中的中的疑問在dva中都有效的解決了。
1、model交叉引用
2、自動注冊
先來一個實例
app.model({
namespace: 'todo',
state: [],
reducers: {
add(state, { payload: todo }) {
// 保存數據到 state
return [...state, todo];
},
},
effects: {
*save({ payload: todo }, { put, call }) {
// 調用 saveTodoToServer,成功后觸發 `add` action 保存到 state
yield call(saveTodoToServer, todo);
yield put({ type: 'add', payload: todo });
},
},
subscriptions: {
setup({ history, dispatch }) {
// 監聽 history 變化,當進入 `/` 時觸發 `load` action
return history.listen(({ pathname }) => {
if (pathname === '/') {
dispatch({ type: 'load' });
}
});
},
},
subscriptions: {
setup({ dispatch, history }) {
history.listen(({ pathname }) => {
if (pathname === '/users') {
dispatch({
type: 'users/fetch',
});
}
});
},
},
});
一、namespace
model 的命名空間,同時也是他在全局 state 上的屬性,只能用字符串,不支持通過 . 的方式創建多層命名空間
1.1 effects
type 類型有:
- takeEvery
- takeLatest
- throttle
- watcher
在effects中跳轉
import { router } from 'dva/router';
import router from 'umi/router';
effects: {
*save({ payload: todo }, { put, call }) {
// 調用 saveTodoToServer,成功后觸發 `add` action 保存到 state
yield call(saveTodoToServer, todo);
yield put({ type: 'add', payload: todo });
// Inside Effects
window.location.hash = activeKey;
// yield put(router.push(activeKey)); // 路由跳轉
},
},