Dva.js总结

mj 发布于2019-08-26 13:28 / 1495人阅读

摘要：是基于现有应用架构等的一层轻量封装，没有引入任何新概念，全部代码不到行。他最核心的是提供了方法，用于把封装到一起表示的状态数据触发的函数，是改变的唯一途径被称为副作用，在我们的应用中，最常见的就是异步操作在中聚合积累的结果是当前的对象。

1.why Dva

dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装，没有引入任何新概念，全部代码不到 100 行。dva 实现上尽量不创建新语法，而是用依赖库本身的语法，比如 router 的定义还是用 react-router 的 JSX 语法的方式(dynamic config 是性能的考虑层面，之后会支持)。
他最核心的是提供了 app.model 方法，用于把 reducer, initialState, action, saga 封装到一起

app.model({
  namespace: "products",
  state: {//State 表示 Model 的状态数据
    list: [],
    loading: false,
  },
  subscriptions: [
    function(dispatch) {
      dispatch({type: "products/query"});//触发 action 的函数，action 是改变 State 的唯一途径
    },
  ],
  effects: {//Effect 被称为副作用，在我们的应用中，最常见的就是异步操作
    ["products/query"]: function*() {
      yield call(delay(800));
      yield put({
        type: "products/query/success",
        payload: ["ant-tool", "roof"],
      });
    },
  },
//在dva中reducers聚合积累的结果是当前model的state 对象。通过actions中传入的值，
//与当前 reducers 中的值进行运算获得新的值（也就是新的 state）
  reducers: {
    ["products/query"](state) {
      return { ...state, loading: true, };
    },
    ["products/query/success"](state, { payload }) {
      return { ...state, loading: false, list: payload };
    },
  },
});

2.简单明了的Dva数据流向

数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State

3.Dva Router控制

dva 实例提供了 router 方法来控制路由，使用的是react-router

const app = dva();
import { Router, Route } from "dva/router";
app.router(({history}) =>
  
    
  
);

4.dva 应用的最简结构（带 model)

dva 提供多个 effect 函数内部的处理函数，比较常用的是 call 和 put。
   call：执行异步函数
   put：发出一个 Action，类似于 dispatch

课堂实战

// 创建应用
const app = dva();

// 注册 Model
app.model({
  namespace: "count",
  state: 0,
  reducers: {
    add(state) { return state + 1 },
  },
  effects: {
    *addAfter1Second(action, { call, put }) {
      yield call(delay, 1000);//异步操作
      yield put({ type: "add" });//类似于dispatch发action
    },
  },
});

// 注册视图
app.router(() => );

// 启动应用
app.start("#root");

5.AntDesignPro1.0项目中的Dva

1.index.js

const app = dva({
  history: createHistory(),//history可以用来跳转路由内含location属性，这里修改history默认接口，其他接口不变----初始化
});

// 2. Plugins
app.use(createLoading());//加载插件这里应该加载的是加载动画插件

// 3. Register global model
app.model(require("./models/global").default);//将src/modles里面的东西灌进去，通过namespace取

// 4. Router
app.router(require("./router").default);//全局挂载路由信息

// 5. Start
app.start("#root");

export default app._store;

2.router.js

export const getRouterData = app => {
    const routerConfig = {
        "/": {
            component: dynamicWrapper(app, ["user", "login"], () => import("../layouts/BasicLayout")),
        },
        "/person/personbasetwo": {//添加路径指向引入的组件，这条数据会被getRoutes函数渲染成真正的包裹的路由
          component: dynamicWrapper(app, ["personbaseTwo"], () => import("../routes/Person/PersonBaseTwo")),
        },
        "/person/baseInfo/:id": {//dynamicWrapper函数会吧[]里面数据放到app的model属性里，app是dva的实例
          component: dynamicWrapper(app, ["personbase"], () => import("../routes/Person/PersonBase/BaseInfo")),
        },
        ·······

3.connect连接model

/*dva的实例app中应该导入了所有的model，好像是在router中导入的，
这里用解构赋值从model中取值，为组件导入props，loading为dva提供的动画插件*/
@connect(({ personbaseTwo, loading }) => ({
  personbaseTwo,
  searchLoading: loading.effects["personbaseTwo/getList"],
//loding被这个异步函数影响，异步操作中就为ture，结束就为false
  loading: loading.effects["personbaseTwo/listpage"],
}))//从model中取数据生成自己想要的对象结构通过@修饰器放到下面组件中去
class personbaseTwo extends Component {
  constructor(props){
    super(props);
    this.state = {
    }
  }
  componentWillMount(){//组件将要渲染时拿到默认的一页多少条和当前页这些数据
    const { personbaseTwo:{pagination} }= this.props;
    const { page,pageSize } = pagination;
    this.props.dispatch({//转到namespace为personbaseTwo下面的listpage方法拿到页码为page的数据
      type:"personbaseTwo/listpage",//接口根据page只去此页数据
      payload:{
        page,
        pageSize,
      },
    });
  }
·······

4.跳转路由

onOk() {//点击确定执行的函数
          const {id}= record;
          than.props.dispatch(routerRedux.push({//用来跳转路由的
            pathname: `/person/baseInfoTwo/${id}`,//用这个pathname重新渲染路由页面并传ID
          }))
        },

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108890.html

(入门)手把手带你更简单的使用dva

摘要：介绍首先是一个基于和的数据流方案，然后为了简化开发体验，还额外内置了和，所以也可以理解为一个轻量级的应用框架。介绍(dva.js) dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。特性易学易用，仅有 6 个 api，对 redu...

makeFoxPlay 2019-08-23 10:47 评论0 收藏0
基于Dva.js的Blog SPA实践

摘要：项目地址项目预览登录流负责全局的登录状态管理。总体思想所有的组件都尽量是所有的状态组件一般都是路由组件。所有的分发都交给了路由组件来完成。数据的获取有两种方式。一种是官方推荐的使用在订阅数据源。项目地址 https://github.com/HeskeyBaoz... 项目预览 showImg(https://segmentfault.com/img/bVIQHX?w=1249&h=...

vslam 2019-08-20 14:06 评论0 收藏0
UMI.js使用方法

摘要：或者在中导入样式文件存放全局通用请求存放通用方法这是时生产的临时目录，默认包含和，有些插件也会在这里生成一些其他临时文件。项目中常用于发送请求，等待服务端响应数据。如果使用的装饰器则为 umi.js使用方法 node环境安装在官网下载与系统相应的node版本，node.js版本>=8.10 编辑器推荐使用Visual Studio Code 安装方法安装umi npm insta...

hearaway 2019-08-23 16:56 评论0 收藏0
如何使用ReactNative快速开发一个APP

摘要：鉴于我平常使用的是系统，就决定我只开发安卓客户端，客户端我们又招了一个小伙伴。一般来讲，安卓系统是这一两年市面上常用机型配置的系统。从去年的10月份开始，我的大部分工作重心从传统的前端开发转向了使用ReactNative开发APP，在这个过程当中，走过了不少弯路，也遇到了一些技术相关的问题，但总算没有辜负那些对我信任的人。经历过痛苦和无助，终于坚持了下来，一个月的时间把产品成功部署上...

taowen 2019-08-26 13:47 评论0 收藏0
vue 在移动端体验上的优化解决方案

摘要：去年年底自己搭了一个在移动端的开发框架，感觉体验不是很好。路由懒加载首页终于写完了，以上这些就是我在移动端体验优化的实战。去年年底自己搭了一个vue在移动端的开发框架，感觉体验不是很好。上个星期又要做移动端的项目了。所以我花了两天时间对之前的那个开发框架做了以下优化自定义vuex-plugins-loading 路由切换动画 + keep alive 动态管理缓存组件 better-sc...

godlong_X 2019-05-22 11:25 评论0 收藏0