Как мне написать redux reducer?

Question

[artemkazan]

Всем привет, я не могу понять как мне reducer написать так, чтобы он изменял свойство visible во вложенных данных, ну т.е есть tree-view, при клике на элемент дерева visible должен меняться, при этом открывается следующий вложенный элемент и т.д

email: {
    folderList: [ {
        name: 'Inbox',
        isSelected: false,
        isNested: true,
        visible: false,
        folderList: [ {
                name: 'SubFolder1',
                isNested: true,
                visible: false,
                folderList : [ {
                    name: 'SubFolder2',
                    isNested: true,
                    visible: false,
                    folderList: [ {
                            name: 'SubFolder3',
                            isNested: false,
                            visible: false
                    } ],
                    count: 5
                } ]
            }, {
                name: 'SubFolder1',
                isNested: false,
                visible: false
        } ]
}

Answer 1

[Никита Гущин]

Если делать все правильно, то во-первых вам нужно нормализовать все это дело. Чтобы получился список папок (я рекомендую хранить в хэшмапе id => entity):

folders: {
  '123': {
    id: 123,
    name: 'Inbox',
    isSelected: false,
    parentId: 123,
    visible: false,
  },
}

Собственно после этого создание reducer'a превратиться в довольно простую задачу:

function folder(action, state = initialState) {
  switch(action.type) {
    case OPEN_FOLDER_ACTION:
      const nextFolders = _.mapValues(state.folders, folder => {
         // Устанавливаем флаг "выбрана" для выбранной папки
        if (folder.id === action.targetId) {
          return { ...folder, isSelected: true };
        }
         // Для дочерних папок устанавливаем флаг видимости
        if (folder.parentId === action.targetId) {
          return { ...folder, visible: true };
        }
        return folder;
      });
      return {
        ...state,
        folders: { ...nextFolders },
      };
  // ...
  }
}