Redux 状态树设计探索

DTUX – 前端开发-小威

知识回顾

状态是指，Web应用中需要共享和通信的数据对象。状态管理是指用一种通用且合理的方式来组织维护这些状态。

状态管理（State Management)

状态分类

Domain data

源于服务端对领域模型的抽象，比如user、projects

UI State

描述UI组件的展示状态，例如visible, selected

App State

例如应用的router信息，http请求状态等

规划原则

按Domain Data划分
按组件划分
根据依赖关系
深度不要过高

状态树分治

// reducerA.js

export const reducerA = (state = '', action) => {
    switch(action.type) {
        case "GET":
            return action.data
        default:
            return state
    }
}

// reducerB.js

export const reducerB = (state = '', action) => {
    switch(action.type) {
        case "GET":
            return action.data
        default:
            return state
            break;
    }
}

// mainReducer.js

import { combineReducers } from 'redux';

import { reducerA } from './reducerA'
import { reducerB } from './reducerB'

export const mainReducer = combineReducers({
    reducerB,
    reducerB,
})

看个栗子

RDOS的状态树

重新规划

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.

| - state
    | - routing
    | - req
    | - user
    | - projects
    | - projectUsers
    | - realtimeTask
        | - tabs
        | - taskTree
        | - resourceTree
        | - currentTab
    | - offlineTask
        | - taskTree
        | - resourceTree
        | - functionTree
        | - sysFunctionTree
        | - workbenchTree
        | - dataSync
    | - sqlEditor
    | - comm
        | - visibleTask
        | - visibleCata
        | - ...

目录规划

Subtitle

| - reducers.js
| - modules
    | - comm
        | - req.js
        | - visible.js
    | - realTimeTask
        | - index.js
        | - tabs.js
        | - taskTree.js
        | - resourceTree.js
        | - currentTab.js
    | - offlineTask
        | - index.js
        | - taskTree
        | - resourceTree
        | - functionTree
        | - sysFunctionTree
        | - workbenchTree
        | - dataSync
        | - sqlEditor.js
    | - user.js
    | - projects.js
    | - projectUsers.js
    | - ...

总结

状态树的设计关系到后期代码的扩展，和维护问题。并且对于一个强迫症来说，逻辑混乱的数据结构是不能容忍的。

End

解决的问题

组件间的数据共享和通信
重复的API请求
杂乱的状态维护逻辑
...