终极版减速如何更新归州儿童

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