其他分享
首页 > 其他分享> > Umi + DvaJS

Umi + DvaJS

作者:互联网

前言

微信多开项目是为企业销售部门管理销售资源整的项目,开发中遇见了很多问题还是要总结一下滴:

1、 关于UmiJS框架:

  1. 是一个可插拔的企业级 react 应用框架,里面内置集成了Dva,能让项目快速上手。

2、 关于Dva框架:

  1. 也是react一个轻量级框架,dva = React-Router + Redux + Redux-saga ;主要解决react数据流问题.

3、 整体项目:

  image.png

项目目录如上:
-----| layouts:放置项目整体框架,头部和主体部分;
-----| models:文件夹内为全局 model;
-----| util 为封装的请求,其中events.js为数据兄弟组件之间事件传参(可不用)
-----| pages 放置所有的页面,如果用的约定式路由,那么每个模块的js文件名称为路由;
-----| .umirc.js 这个为项目配置文件(包括代理/配置式路由在这里配置)
-----| app.js ~~~~运行时配置文件,里面配置了dva捕获全局err;

4、 部分功能模块:

4.1 用dva管理数据例子1:

  //global.js  
  export  default {
   namespace:  'global',
   state: {
  //是否为便捷模式
  isQuickMode:  false,
  //聊天对象好友0 还是 群 1  
  chatobject:-1,    
  },    
  reducers: {    
  // 改变首页显示模式    
  changeMode(state, { payload: data}) {    
  //此处必须返回一个新的state对象 不能直接改变原有state    
  return  Object.assign({},state,{    
  isQuickMode:  data.value    
  })    
  },    
  changeChatObj(state,{ payload: data}){    
  return  Object.assign({},state,{    
  chatobject:  data.value    
  })
  }
  }
  }

 

注:这个global.js是全局的model,进入首页一开始没有聊天对象,聊天对象可能是群或好友,所以设置全局chatobject变量存储聊天对象;isQuickMode判断用户是否是效率模式或者便准模式;点击切换模式,通过dispatch调用model中reducers中的方法,在wechat中的index.js中将数据connect到当前组件上的props,再绑定到子组件上之后在子组件LeftList中即可取到,设置左侧导航宽度,代码如下:

dispatch({
  type:'global/changeMode',
  payload:{
  value:!isQuickMode
  }
})

//将model 数据connect到当前组件上的props属性中
const  mapStateToProps  = (state)=>{
let { isQuickMode,chatobject} =  state.global;
  return {
    isQuickMode,
    chatobject
  }
}

 

4.2 用dva管理数据例子2:

点击添加微信号,弹出微信登录模态框;model 分两类,一是全局 model,二是页面 model,这里试了页面model,建chat.js,增加effects异步;Effect 是一个 Generator 函数,标识每一步的操作;reducers 中新建save方法为重新set state数据(reducers是唯一操作state的地方),代码如下:

  import  *  as  chatServer  from  '../services/chat';
  export  default {  
  namespace:  'chat',  
  state: {  
  test:0,  
  isshowMask:false  
  },
  reducers: {  
    save(state, { payload: { isshowMask } }) { 
      return { ...state,isshowMask};  
    }  
  },  
  effects: {
  *mytest({ payload: {isshowMask  =  false,page=1} },{ call, put,select }){  
    //put 为dispatch  
    const { data, headers } =  yield  call(chatServer.fetch, { page });  
    console.log(data)  
    yield  put({  
    type:  'save',  
    payload:{  
    isshowMask  
    }  
    })    
  
  }  
  }
}

dva 提供多个 effect 函数内部的处理函数call/put/select,
call:执行异步函数;put:用于触发 action ,类似于 dispatch;select:用于从 state 里获取数据;(注意:定义 effects 里面的函数切不能与reducers 里面的action名字相同,不会报错,浏览器直接崩了)。

4.3 表情picker:

本来引用了react 一个控件,但是与实际微信表情有出入,所以去网上下载了所有表情jif表情图片,循环渲染出表情,整一个数组对应多有表情的解释。

4.4 聊天界面:

区分自己和对方消息,区分图片类型消息/文字类型消息/文件类型消息,回车或发送在消息列表push一个新消息即可;

4.5 文件存储拖拽:

用了H5 的拖拽,只用了onDrop 没有真正操作dom移动,当onDrop时还是操作数据的增删;当拖动图片到指定位置,会触发onDrop;

5、Dva

  1528436195004-cd3800f2-f13d-40ba-bb1f-4efba99cfe0d.png

Dva 是基于 React + Redux + Saga 的最佳实践沉淀, 做了 3 件很重要的事情, 大大提升了编码体验:

  1. 把 store 及 saga 统一为一个 model 的概念, 写在一个 js 文件里面
  1. 增加了一个 Subscriptions, 用于收集其他来源的 action, eg:一般路由~~~~
  1. model 写法很简约, 类似于 DSL 或者 RoR, coding 快得飞起

( 注:Dva中Model中Subscriptions:subscription 是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。 在 app.start() 时被执行,数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。)

6、 umi-plugin-react

项目中配置了 dynamicImport ,路由跳转时loading,配置如下:

//* `webpackChunkName`,是否通过 webpackChunkName 实现有意义的异步文件名
//* `loadingComponent`,指定加载时的组件路径
//* `level`,指定按需加载的路由等级
dynamicImport: {

webpackChunkName:  true,

loadingComponent:  './component/PageLoading/index',

},
     



原作者:我回地球了,链接:https://www.jianshu.com/p/81a5d4371f81

标签:DvaJS,data,js,state,model,Umi,payload,路由
来源: https://www.cnblogs.com/GeniusZ/p/12486416.html