【react】dva
程序员文章站
2022-07-16 14:31:17
...
dva是react的数据流解决方案,基于 redux 和 redux-saga。ANT DESIGN PRO框架中集成了dva,在项目中我们看看dva常用的功能。
1.Model
namespace
model层的命名空间,它是根状态上的属性。
state
当前model的状态,优先级低于根状态的同名属性
const app = dva({
initialState: { count: 1 },
});
app.model({
namespace: 'count',
state: 0,
});
state.count 为 1
reducers
redux中的状态处理器,通过action触发。
effects
基于generator实现的异步处理器,redux-saga
的异步数据流方案
有三种形式
const res = yield call(getSomething, payload);
// 执行异步操作
yield put({
type: "save",
payload: res
});
// 发放一个action,触发reducer更新状态
const todos = yield select(state => state.todos);
// 获取state里的数据
subscriptions
setup({ dispatch, history }) {
history.listen(({ pathname }) => {
if (pathname === '/users') {
dispatch({
type: 'users/fetch',
});
}
});
},
// 在进入users路由是获取数据
2.进行路由跳转
dva继承router,能方便的进行路由跳转
import { routerRedux } from 'dva/router';
routerRedux.push({
pathname: '/logout',
query: {
page: 2,
},
});