Блог

Краткая информация для описания контекста. Я работаю над компонентом дерева, который получает в качестве реквизита такую модель данных:

 workfolder: [{
    label: "test",
    folders: [
        { label: "label 1", id: 1 },
        { label: "label 2", id: 2 },
        { label: "label 3", id: 3 }
    ]
}];
  

Все данные хранятся в хранилище Redux.

Начальное значение равно:

 state: { workfolder: [] }
  

При монтировании я извлекаю значения по умолчанию и объединяю результаты с workfolder в редукторе, и я получаю свое дерево, нарисованное.

 return {
  ...state,
  workfolder: results
}
  

Когда я нажимаю на одну из меток (метка 3), я снова извлекаю вложенные папки, используя id , и я получаю:

 [{ label: "label 5", id: 5 },{ label: "label 5", id: 5 }]
  

На этом этапе в редукторе я использую библиотеку для углубленного изучения состояния, пока не найду свойство, соответствующее id элементу, на который я нажал (в данном случае label 3), и хочу объединить вложенные папки в новый атрибут папки.

 let newState = JSON.parse(JSON.stringify(state.workfolder));

deepForEach( newState, (value, key, subject, path) => { 
    const isParentFolder = value === action.payload.parent;
    const hasNotFolders = !subject.folders;

    if( isParentFolder amp;amp; hasNotFolders ) {

        subject.folders = action.payload.node

    }

} );
  

затем я объединяю новое состояние в хранилище:

 return {
    ...state,
    workfolder: newState
}
  

Следуя этому способу, я обновляю хранилище, но компонент не будет перерисовываться.

ПРИМЕЧАНИЕ: это фиктивный пример. В реальной жизни мне приходится иметь дело с многоуровневым вложенным объектом, имеющим только id и a string , содержащим путь к атрибуту, который я хочу изменить в хранилище. Пример, который я нашел в документации redux, показывает, как это сделать, статически записывая слияние…