終極版減速如何更新歸州兒童

Question

我有有效載荷，其表示正深深嵌套的樹狀結構，它看起來像..（你可以把部分陣列作爲一棵樹上兒童）

const data = { 
    id: 123, 
    sections: [{ 
    id: 1, 
    sections:[{ id: 4, sections: [ { id: 5, sections: [] } ] }] 
    }, { 
    id: 2, 
    sections:[] 
    }, { 
    id: 3, 
    sections:[] 
    }] 
}; 

歸有效載荷A的狀態如下

{ 
    "entities": { 
    "sections": { 
     "1": { "id": 1, "sections": [ 4 ] }, 
     "2": { "id": 2, "sections": [] }, 
     "3": { "id": 3, "sections": [] }, 
     "4": { "id": 4, "sections": [ 5 ] }, 
     "5": { "id": 5, "sections": [] } 
    }, 
    "menu": { 
     "123": { "id": 123, "sections": [ 1, 2, 3 ] } 
    } 
    }, 
    "result": 123 
} 

如果用戶要展開第5部分，我將關閉並從服務器加載更多子項。有效載荷B，從服務器返回時，歸一化會是什麼樣子

{ 
    "entities": { 
    "sections": { 
     「6」: { "id": 6, "sections": [] }, 
    }, 
    "menu": { 
     "1234」: { "id": 1234, "sections": [ 6 ] } 
    } 
    }, 
    "result": 1234 
} 

我如何寫一個減速器結合（合併/圖等）歸一化的有效載荷的和標準化的有效載荷B上的新的終極版商店狀態如下所示。 ..

{ 
    "entities": { 
    "sections": { 
     "1": { "id": 1, "sections": [ 4 ] }, 
     "2": { "id": 2, "sections": [] }, 
     "3": { "id": 3, "sections": [] }, 
     "4": { "id": 4, "sections": [ 5 ] }, 
     "5": { "id": 5, "sections": [6] }, 
    「6」: { "id": 6, "sections": [] } 
    }, 
    "menu": { 
     "123": { "id": 123, "sections": [ 1, 2, 3 ] } 
    } 
    }, 
    "result": 123 
} 

Answer 1

它不應該是很難實現的，在你減速，我相信你保持以前的狀態，以下列方式拉出來，從以前的狀態entities.sections值

var newData = {...state.entities.sections,newSectionPayload}

newSectionPayload應該包含新擴展部分的數據。

我還沒有嘗試過，但我很確定它應該工作。

Answer 2

這裏是我的減速器解決以上，似乎這樣的伎倆

export const productHierarchyReducer: ActionReducer<ProductHierarchyState> = (state:any={}, action: Action) => { 
    switch (action.type) { 
     case ADD_PRODUCTHIERARCHY: 
      const normalizedTreeNodes = normalize(action.payload, TreeNodesSchema);   
      return normalizedTreeNodes; 
     case ADD_PRODUCTHIERARCHY_CHILDREN: 

        const {targetNodeId, payload} = action.payload; 
        const normalizedChildNodes = normalize(payload, TreeNodesSchema); 

        const expandTargetNode=dotProp.set(
         state, 
         `entities.children.${targetNodeId}.expanded`, 
          expanded => true 
         ); 

        const updatedWithNewChildren = dotProp.set(
         expandTargetNode, 
         `entities.children.${targetNodeId}.children`, 
          children => 
          children.concat(normalizedChildNodes.entities.nodes[normalizedChildNodes.result].children) 
         ); 

        const newState=dotProp.set(updatedWithNewChildren, 
         `entities.children`, 
          children => Object.assign({}, children, normalizedChildNodes.entities.children) 
         ) 

        return newState; 

     default: 
      return state; 
    }  
}; 
export const ProductHierarchyReducer = { 
    productHierarchy: productHierarchyReducer 
} 

另外，TreeNodesSchema看起來如下。

const nodeKey = new schema.Entity('children') 
const children = new schema.Array(nodeKey); 
nodeKey.define({ children }); 
export const TreeNodesSchema = new schema.Entity('nodes', { children }); 

的dotProp.set（）語法屬於點 - 丙不變 https://github.com/debitoor/dot-prop-immutable

這個資源上更新規格化狀態是有益的 http://redux.js.org/docs/recipes/reducers/UpdatingNormalizedData.html