成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

基于Dva.js的Blog SPA實踐

vslam / 1163人閱讀

摘要：項目地址項目預(yù)覽登錄流負(fù)責(zé)全局的登錄狀態(tài)管理?？傮w思想所有的組件都盡量是所有的狀態(tài)組件一般都是路由組件。所有的分發(fā)都交給了路由組件來完成。數(shù)據(jù)的獲取有兩種方式。一種是官方推薦的使用在訂閱數(shù)據(jù)源。

項目地址

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

項目預(yù)覽



登錄流

models/app負(fù)責(zé)全局的登錄狀態(tài)管理。

在路由控制中，使用react-router的onEnter鉤子保證在進(jìn)入需要授權(quán)的頁面中登錄狀態(tài)是保持的。

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, 所有的狀態(tài)connect組件一般都是路由組件。所有的分發(fā)dispatch都交給了路由組件來完成。

這樣我可以保證我可以復(fù)用一些Dumb組件，比如PostsListBody這個組件，既可以在文章列表頁面使用，也可以在用戶頁面查看自己的文章列表使用。

數(shù)據(jù)的獲取

有兩種方式。

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

"訂閱"數(shù)據(jù)源。這封裝了react-redux-router增強的history。

這樣可以監(jiān)聽路由的變化，比如說下面在進(jìn)入/posts時，會發(fā)起一個獲取文章列表的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}}
                    });
                }
            });
        }
    }
});

還有一種是進(jìn)入一些頁面時，要保證一些數(shù)據(jù)已經(jīng)在state中了。這時我還是使用了react-router的onEnter鉤子。

比如說在進(jìn)入文章詳細(xì)頁面時，需要知道文章的基本元信息，標(biāo)題作者等等。等到元信息加載完，再進(jìn)入頁面。

語法層面上上，多虧了有saga的各種effects創(chuàng)建器?？梢院芩貙懗龈鞣N異步代碼

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將獲取到的文章數(shù)組扁平化，方便后續(xù)修改visible可見狀態(tài)等。

原理如圖：

這樣在獲取數(shù)據(jù)源展示數(shù)據(jù)時，即可使用一條語句

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81422.html

相關(guān)文章

  • (入門)手把手帶你更簡單的使用dva

    摘要：介紹首先是一個基于和的數(shù)據(jù)流方案，然后為了簡化開發(fā)體驗，還額外內(nèi)置了和，所以也可以理解為一個輕量級的應(yīng)用框架。 介紹(dva.js) dva 首先是一個基于 redux 和 redux-saga 的數(shù)據(jù)流方案，然后為了簡化開發(fā)體驗，dva 還額外內(nèi)置了 react-router 和 fetch，所以也可以理解為一個輕量級的應(yīng)用框架。 特性 易學(xué)易用，僅有 6 個 api，對 redu...

    makeFoxPlay 評論0 收藏0

  • vue 在移動端體驗上的優(yōu)化解決方案

    摘要：去年年底自己搭了一個在移動端的開發(fā)框架，感覺體驗不是很好。路由懶加載首頁終于寫完了，以上這些就是我在移動端體驗優(yōu)化的實戰(zhàn)。去年年底自己搭了一個vue在移動端的開發(fā)框架，感覺體驗不是很好。上個星期又要做移動端的項目了。所以我花了兩天時間對之前的那個開發(fā)框架做了以下優(yōu)化 自定義vuex-plugins-loading 路由切換動畫 + keep alive 動態(tài)管理緩存組件 better-sc...

    godlong_X 評論0 收藏0

  • 搜集React、Vue、Angular和傳統(tǒng)UI組件庫以及后臺管理平臺模板

    摘要：高顏值好用易擴(kuò)展的微信小程序庫，有贊。一套高質(zhì)量的微信小程序組件庫。用和搭建的一個通用管理后臺基于實現(xiàn)的后臺管理系統(tǒng)模板一個后臺管理系統(tǒng)模板是一套組件化框架，支持定制主題，主要服務(wù)于前臺及中后臺產(chǎn)品?；诤笈_管理系統(tǒng)。 快來Star，在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

    zhangrxiang 評論0 收藏0

  • 搜集React、Vue、Angular和傳統(tǒng)UI組件庫以及后臺管理平臺模板

    摘要：高顏值好用易擴(kuò)展的微信小程序庫，有贊。一套高質(zhì)量的微信小程序組件庫。用和搭建的一個通用管理后臺基于實現(xiàn)的后臺管理系統(tǒng)模板一個后臺管理系統(tǒng)模板是一套組件化框架，支持定制主題，主要服務(wù)于前臺及中后臺產(chǎn)品。基于后臺管理系統(tǒng)。 快來Star，在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

    source 評論0 收藏0

  • Dva.js總結(jié)

    摘要：是基于現(xiàn)有應(yīng)用架構(gòu)等的一層輕量封裝，沒有引入任何新概念，全部代碼不到行。他最核心的是提供了方法，用于把封裝到一起表示的狀態(tài)數(shù)據(jù)觸發(fā)的函數(shù)，是改變的唯一途徑被稱為副作用，在我們的應(yīng)用中，最常見的就是異步操作在中聚合積累的結(jié)果是當(dāng)前的對象。 1.why Dva dva 是基于現(xiàn)有應(yīng)用架構(gòu) (redux + react-router + redux-saga 等)的一層輕量封裝，沒有引入任何...

    mj 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<