解析SkyBlog中store中存储的state

说到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()
});

除了倒数3个分别是redux-form、react-router-redux、reapop提供的Reducer，其他均是项目本身的Reducer，存储着页面中所有的数据。

Navigation State

存储了项目中使用的所有Modal的显示状态，当然默认全是false啦。

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

Login State

登录相关的state，是非常重要的state，存储了

登录是否成功
登录用户信息
还有是否开启管理模式的信息

其中这个management便是SkyBlog实现阅读与管理合一的核心。

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

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

Articles State - 文章列表

存储了文章和分类文章的分页信息

其中loading属性在之后不少地方也有出现，这个属性是实现加载中的属性

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的右侧导航栏数据便出自于此

show则是编辑器用于判断是否显示新增分类的属性

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

Content State - 文章内容

整个项目最重的一个state，也是博客的核心——文章页面的state，存储了

文章信息
文章下的评论列表
选择回复的评论

export const initialArticle = {
    id : 0,
    title : "文章标题",
    sub_title : "文章副标题",

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

    content : {
        text: "#### 文章内容\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 - 关于

存储了关于的信息

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动态

存储了SkyBlog的项目Commits信息

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

SysLog State - 系统日志

存储了系统日志列表的信息，只在SysLogModal显示

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

以上便是项目中存储的State，然后还有三个第三方State：

react-router-redux - 存储路由信息
redux-form - 存储表单信息
notifications - 通知系统reapop存储的信息

以上便是项目中ViewModel中存储的信息啦，不得不说Redux可以说是SkyBlog的MVP，没有状态管理工具估计要写半天上下文的代码。

解析SkyBlog中store中存储的state