基于Dva.js的Blog SPA实践

vslam 发布于2019-08-20 14:06 / 972人阅读

摘要：项目地址项目预览登录流负责全局的登录状态管理。总体思想所有的组件都尽量是所有的状态组件一般都是路由组件。所有的分发都交给了路由组件来完成。数据的获取有两种方式。一种是官方推荐的使用在订阅数据源。

项目地址

https://github.com/HeskeyBaoz...

项目预览

登录流

models/app负责全局的登录状态管理。

在路由控制中，使用react-router的onEnter钩子保证在进入需要授权的页面中登录状态是保持的。

function requireAuth(nextState, replace, callback) {
    app._store.dispatch({
        type: "app/enterAuth",
        payload: {},
        onComplete: callback // enter the component
    });
}

function* enterAuth({payload, onComplete}, {put, take}) {
    yield [put({type: "checkToken"}), put({type: "queryUser"})];
    yield [take("app/hasToken"), take("app/queryUserSuccess")]; // promise the logged state
    onComplete();
}

总体思想

所有的组件都尽量是stateless, 所有的状态connect组件一般都是路由组件。所有的分发dispatch都交给了路由组件来完成。

这样我可以保证我可以复用一些Dumb组件，比如PostsListBody这个组件，既可以在文章列表页面使用，也可以在用户页面查看自己的文章列表使用。

数据的获取

有两种方式。

一种是dva.js官方推荐的, 使用在models/posts

"订阅"数据源。这封装了react-redux-router增强的history。

这样可以监听路由的变化，比如说下面在进入/posts时，会发起一个获取文章列表的action.

app.model({
    subscriptions: {
        setup: function ({history, dispatch}) {
            history.listen(location => {
                if (pathToRegExp("/posts").exec(location.pathname)) {
                    dispatch({
                        type: "fetchPostsList",
                        payload: {pageInfo: {limit: 5, page: 1}}
                    });
                }
            });
        }
    }
});

还有一种是进入一些页面时，要保证一些数据已经在state中了。这时我还是使用了react-router的onEnter钩子。

比如说在进入文章详细页面时，需要知道文章的基本元信息，标题作者等等。等到元信息加载完，再进入页面。

语法层面上上，多亏了有saga的各种effects创建器。可以很爽地写出各种异步代码

function requirePostPrepared(nextState, replace, callback) {
    app._store.dispatch({
        type: "post_detail/initializePostDetail",
        payload: {post_id: nextState.params.post_id},
        onComplete: callback
    });
}

function* initializePostDetail({payload, onComplete}, {put, call}) {
    yield put({type: "clear"});
    const {post_id} = payload;
    const {data} = yield call(fetchPostInfo, {post_id});
    if (data) {
        yield put({
            type: "saveInitialPostDetailInfo",
            payload: {postInfo: data}
        });
        onComplete(); // enter the component
        
        // then fetch the data
        yield [
            put({type: "fetchPostContent"}),
            put({type: "fetchPostComments"})
        ];
    }
}

文章列表

使用normalizr将获取到的文章数组扁平化，方便后续修改visible可见状态等。

原理如图：

这样在获取数据源展示数据时，即可使用一条语句

const dataSource = postsList.map(post_id => postsById[post_id]).filter(post => post);

服务器托管海外云主机 dva.js 基于腾讯云的k8s实践 spa single-spa

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

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

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

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

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

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

godlong_X 2019-05-22 11:25 评论0 收藏0
搜集React、Vue、Angular和传统UI组件库以及后台管理平台模板

摘要：高颜值好用易扩展的微信小程序库，有赞。一套高质量的微信小程序组件库。用和搭建的一个通用管理后台基于实现的后台管理系统模板一个后台管理系统模板是一套组件化框架，支持定制主题，主要服务于前台及中后台产品。基于后台管理系统。快来Star，在这里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

zhangrxiang 2019-08-29 13:59 评论0 收藏0
搜集React、Vue、Angular和传统UI组件库以及后台管理平台模板

摘要：高颜值好用易扩展的微信小程序库，有赞。一套高质量的微信小程序组件库。用和搭建的一个通用管理后台基于实现的后台管理系统模板一个后台管理系统模板是一套组件化框架，支持定制主题，主要服务于前台及中后台产品。基于后台管理系统。快来Star，在这里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

source 2019-08-21 18:01 评论0 收藏0
Dva.js总结

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

mj 2019-08-26 13:28 评论0 收藏0