基于Dva.js的Blog SPA實踐

vslam 發布于2019-08-20 14:06 / 1146人閱讀

摘要：項目地址項目預覽登錄流負責全局的登錄狀態管理。總體思想所有的組件都盡量是所有的狀態組件一般都是路由組件。所有的分發都交給了路由組件來完成。數據的獲取有兩種方式。一種是官方推薦的使用在訂閱數據源。

項目地址

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);

云服務器 GPU云服務器 dva.js 基于騰訊云的k8s實踐 spa single-spa

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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