让前端飞Web前端之路

React + Redux最佳实践实现的framework——d

2019-11-01  本文已影响0人  虚拟J

dva 首先是一个基于 reduxredux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-routerfetch,所以也可以理解为一个轻量级的应用框架。

下面的2篇文章:
支付宝前端应用架构的发展和选择:可以知道dva的由来。
redux 最佳实践: 总结目前 react + redux 的最佳实践,解释原因,并提供了可选方案。

构建项目

安装 dva脚手架(dva-cli)

npm install dva-cli -g

然后创建一个应用

dva new dva-quickstart

然后就可以直接开发项目了,就按照文档dva快速上手这一章做就好了,已经很详细简单了。

关于使用dva

dva 中最重要的概念——model 。通过 model 的概念把一个领域的模型管理起来,包含同步更新 state 的 reducers,处理异步逻辑的 effects,订阅数据源的 subscriptions 。
总之把 reducer, initialState, action, saga 封装到一起,写在一个 js 文件里面,不用文件之间来回切换,大大提升了编码体验。

export default {
  namespace: 'chestnut',  //model 的命名空间,同时也是他在全局 state 上的属性,只能用字符串,不支持通过 . 的方式创建多层命名空间。
  state: {},  //初始值,优先级低于传给 dva() 的 opts.initialState。
  reducers: {},  //对应redux
  effects: {},   //对应saga,并简化了使用
  subscriptions:{},  //增加了一个 Subscriptions, 用于收集其他来源的 action, eg: 键盘操作
}

我们可以在model 中触发下面的代码获取到在dva文档中没有提及到的effect:

*chestnut({ payload }, { ...effects }) {
        console.log( effects )
    },
很眼熟?没错,就是redux-saga的API

dva 没有引入任何新概念,全部代码不到 100 行。实现上尽量不创建新语法,而是用依赖库本身的语法。所以如果有掌握redux(我梳理的redux),redux-saga( 我梳理的redux-saga)的话,使用dva是非常简单和容易上手的事情。

你看dva官网文档可能忽略的点
//另一种格式
saga:[function*({ payload }, { put, select }) {
          //....逻辑
     },
     { type: 'takeLatest' }
  ],
//  select 的参数为空,会取得完整的 state
const chestnut= yield select();

// 获取对应 model 的 namespace 为 chestnut 的全部 state
const chestnut= yield select(state => state.chestnut);
使用dva中可能会遇到的问题:

最后,建议把dva文档所有内容看一遍,内容不多,讲的很细,也很简单。

上一篇 下一篇

猜你喜欢

热点阅读