反応redux配列のネストされたツリーメニュー

Question

私は学習者の開発者であり、ツリーメニュー（react + redux + sagas）を使ってアプリケーションを構築していますが、突然変異状態のエラーが発生していますプラクティスは、可能な限り状態がフラット・デ・滞在ですが、私は平らな状態で1つのメニューツリーどのような仕事をfindedなかったので、私のデータは、この見ている：

menuTree: [{ 
    id: 'id-root', 
    name: 'root', 
    toggled: true, 
    children: [ 
     { 
      id: 'id-parent1', 
      name: 'parent1', 
      toggled: true, 
      children: [ 
       { 
        id: '123', 
        name: 'parent1_child1' 
       }, 
       { 
        id: '234', 
        name: 'parent1_child2' 
       } 
      ] 
     }, 
     { 
      id: 'id-loading-parent', 
      name: 'loading parent', 
      loading: true, 
      children: [] 
     }, 
     { 
      id: 'id-parent2', 
      name: 'parent2', 
      toggled: true, 
      children: [ 
       { 
        id: 'parent2_children1', 
        name: 'nested parent2', 
        children: [ 
         { 
          id: '345', 
          name: 'parent2 child 1 nested child 1' 
         }, 
         { 
          id: '456', 
          name: 'parent2 child 1 nested child 2' 
         } 
        ] 
       } 
      ] 
     } 
    ] 
}], 

そして、私のReduxのアクション：

​​ を

コードは機能しますが、突然変異状態エラーが出ます。

Answer 1

あなたはプレーンなリストとしてあなたのメニューを再構築することができます：あなたのメニューレンダラーがツリーを必要とする場合this.menuTreeは木になるコンポーネントのレンダラの内部よう

let menuTree = [{ 
    id: 'id-root', 
    name: 'root', 
    toggled: true, 
    parent: null 
},{ 
    id: 'id-parent1', 
    name: 'parent1', 
    toggled: true, 
    parent: 'id-root' 
},{ 
    id: '123', 
    name: 'parent1_child1', 
    parent: 'id-parent1' 
},{ 
    id: '234', 
    name: 'parent1_child1', 
    parent: 'id-parent1' 
}, 
{ 
    id: 'id-loading-parent', 
    name: 'loading parent', 
    loading: true, 
    parent: 'id-root' 
},{ 
    id: 'id-parent2', 
    name: 'parent2', 
    toggled: true, 
    parent: 'id-root' 
},{ 
    id: 'parent2_children1', 
    name: 'nested parent2', 
    parent: 'id-parent2'   
},{ 
    id: '345', 
    name: 'parent2 child 1 nested child 1', 
    parent: 'parent2_children1' 
}, 
{ 
    id: '456', 
    name: 'parent2 child 1 nested child 2', 
    parent: 'parent2_children1' 
}] 

は、あなたがツリーにリストを変換することができます。

突然変異インサイド

const buildTree = (tree, cParent = null) => { 
    return tree.filter(cNode => cNode.parent == cParent).reduce((curr, next) => { 
    let cNode = {...next, children: buildTree(tree, next.id)} 
    delete cNode.parent 
    return [...curr, cNode] 
    }, []) 
} 

function mapStateToProps(state) { 
    return { 
    mapTree: builTree(state.mapTree) 
    }; 
} 

export default connect(mapStateToProps)(YourComponent); 

今あなただけの切り替えと、それに応じ

case types.SOLUTION__MENUCURSOR__SET: 
    // console.log('action payload', action.payload); 
    // console.log('state', state); 
    const cursor = action.payload.cursor; 
    // console.log('set menu cursor action', cursor); 

    const getToggleList = (tree, cursor) => { 
    let target = tree.find(cNode => cNode.id == cursor.id) 
    if(target.parent != null){ 
     let parent = tree.find(cNode => cNode.id == target.parent) 
     return [target.parent, ...getToggleList(tree, parent)] 
    }else{ 
    return [] 
    } 
    } 

    let toggleList = [cursor.id, ...getToggleList(state.menuTree, cursor.id)] 

    return { 
    ...state, 
    menuTree: state.menuTree.map(node => ({...node, toggle: toggleList.includes(node.id)})) 
    }; 

0の状態をマッピングする必要がありますノードのリストを作成する必要があります