欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【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,
  },
});
相关标签: redux

上一篇: redux

下一篇: Redux集成