說到state，我們肯定從Reducer入手圾叼，先來看下AppReducer

const AppReducer = combineReducers({
    navigation : NavigationReducer,
    articles : ArticlesReducer,
    content : ContentReducer,
    upload : UploadReducer,
    login : LoginReducer,
    users : UsersReducer,
    classify : ClassifyReducer,
    about : AboutReducer,
    msg : MsgBoardReducer,
    github : GithubReducer,
    sys_log : SysLogReducer,
    form : formReducer,
    router: routerReducer,
    notifications: notificationsReducer()
});

除了倒數(shù)3個分別是redux-form蛤克、react-router-redux、reapop提供的Reducer夷蚊，其他均是項目本身的Reducer构挤，存儲著頁面中所有的數(shù)據(jù)。

Navigation State

存儲了項目中使用的所有Modal的顯示狀態(tài)惕鼓，當然默認全是false啦筋现。

const initialState = {
    modal : {
        loginModal_show : false,
        registerModal_show : false,
        userInfoModal_show : false,
        userManagementModal_show : false,
        sysLogModal_show : false
    }
};

Login State

登錄相關(guān)的state，是非常重要的state呜笑，存儲了

1. 登錄是否成功
2. 登錄用戶信息
3. 還有是否開啟管理模式的信息

其中這個management便是SkyBlog實現(xiàn)閱讀與管理合一的核心夫否。

const initialUser = {
    id: 0,
    username : "",
    nickname : "",
    admin : false
};

const initialState = {
    ok : null,
    message : null,
    management : false,
    user : initialUser
};

Articles State - 文章列表

存儲了文章和分類文章的分頁信息

其中loading屬性在之后不少地方也有出現(xiàn)，這個屬性是實現(xiàn)加載中的屬性

const initialClassify = {
    loading: true,
    id : 0,
    name : "",
    page : {
        list : [],
        page_num : 1,
        pages : 0,
        total : 0,
    }
};

const initialState = {
    page : {
        list : [],
        page_num : 1,
        pages : 0,
        total : 0,
    },
    loading: true,
    classify : initialClassify
};

Classify State - 文章分類

存儲分類信息叫胁，/articles的右側(cè)導航欄數(shù)據(jù)便出自于此

show則是編輯器用于判斷是否顯示新增分類的屬性

const initialState = {
    list : [],
    show : false
};

Content State - 文章內(nèi)容

整個項目最重的一個state凰慈，也是博客的核心——文章頁面的state，存儲了

1. 文章信息
2. 文章下的評論列表
3. 選擇回復的評論

export const initialArticle = {
    id : 0,
    title : "文章標題",
    sub_title : "文章副標題",

    classify : {
        id : 1,
        name : "未分類"
    },
    classify_id : 1,

    content : {
        text: "#### 文章內(nèi)容\n`Markdown編輯器`",
        selection: null
    }
};

const initialComments = {
    list : [],
    page_num : 1,
    pages : 0,
    total : 0
};

export const initialPreviousComment = {
    id : 0,
    author : {
        id : 0,
        nickname : ""
    },
    content : ""
};

const initialState = {
    comments : initialComments,
    comments_loading : true,

    article : initialArticle,
    article_loading: true,

    previous_comment : initialPreviousComment
};

Upload State - 上傳

存儲了上傳文件Modal的顯示驼鹅、服務器訪問的信息

const initialState = {
    uploadModal_show : false,
    response : {
        ok : null,
        message : null,
        url : ""
    }
};

About State - 關(guān)于

存儲了關(guān)于的信息

const initialState = {
    content : {
        text: "",
        selection: null
    },
    loading : true
};

MsgBoard State - 留言板

存儲了留言列表微谓、選擇回復的留言的信息

const initialState = {
    page : {
        list : [],
        page_num : 1,
        pages : 0,
        total : 0
    },
    loading : true,
    previous_comment : initialPreviousComment
};

Users State - 用戶

存儲了用戶列表的信息，只在UserManagementModal顯示

const initialState = {
    list : [],
    page_num : 1,
    pages : 0,
    total : 0,
};

Github State - SkyBlog動態(tài)

存儲了SkyBlog的項目Commits信息

const initialState = {
    commits : [],
    loading : true
};

SysLog State - 系統(tǒng)日志

存儲了系統(tǒng)日志列表的信息输钩，只在SysLogModal顯示

const initialState = {
    list : [],
    page_num : 1,
    pages : 0,
    total : 0,
};

以上便是項目中存儲的State豺型，然后還有三個第三方State：

1. react-router-redux - 存儲路由信息
2. redux-form - 存儲表單信息
3. notifications - 通知系統(tǒng)reapop存儲的信息

以上便是項目中ViewModel中存儲的信息啦，不得不說Redux可以說是SkyBlog的MVP买乃，沒有狀態(tài)管理工具估計要寫半天上下文的代碼姻氨。