javascript - React redux 数组嵌套树菜单

Question

我是一名学习开发者，我正在构建一个带有树形菜单的应用程序(react + redux + sagas)，但我遇到了一些突变状态错误，我看到了最佳实践是保持状态平坦尽可能，但我没有找到一个适用于平面状态的菜单树，所以我的数据如下:

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 操作:

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);
  return { 
    ...state,
    menuTree: state.menuTree.map(
      function buscaIdMenuTree(currentValue, index, arr){
        if(currentValue.id){
          if(currentValue.id.includes(cursor.id)){
            currentValue.toggled = action.payload.toggled;
            return arr;
          }else{
            if(currentValue.children)
            {
              currentValue.children.forEach(function(currentValue, index, arr){
                return buscaIdMenuTree(currentValue,  index, arr);
              });
            }        
          }
          return arr;
        }
      }
    )[0]
  };

代码可以工作，但我收到突变状态错误，所以有人可以帮助我修复它吗？

Answer 1

您可以将菜单重建为简单列表:

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'
}]

然后，如果您的菜单渲染器需要一棵树，您可以将列表转换为一棵树，因此组件渲染器内 this.menuTree 将是一棵树:

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)}))
  };