Reselect und rekursive Wähler

Question

Ich habe einen redux Zustand mit einem Baum der Elemente (normalisiert) wie:

state = { 
    items: [ 
    { id: 1, parent: null, children: [2, 3] }, 
    { id: 2, parent: 1, children: [4] }, 
    { id: 3, parent: 1, children: [], value: 10 }, 
    { id: 4, parent: 2, children: [], value: 20 } 
    ] 
} 

ich die Verringerung Summe der Werte für Punkt 1 (hier = 10 + 20 = 30) erhalten möchten und ich möchte einen Selector Selector dafür erstellen.

Aber wie kann ich einen rekursiven Selektor definieren?

Danke für Ihre Hilfe. ;-)

Frédéric

Answer 1

Versuchen Sie folgendes:

let state = { 
 
    items: [ 
 
     { id: 1, parent: null, children: [2, 3] }, 
 
     { id: 2, parent: 1, children: [4] }, 
 
     { id: 3, parent: 1, children: [], value: 10 }, 
 
     { id: 4, parent: 2, children: [], value: 20 } 
 
    ] 
 
} 
 

 
function getSum(state, id) { 
 
    let item = state.items.find(item => item.id == id); 
 
    return item.hasOwnProperty('value') ? item.value : item.children.reduce((current, next) => { 
 
    return current + getSum(state, next); 
 
    }, 0); 
 
} 
 

 
let sum = getSum(state, 1); 
 

 
console.log(sum);

Answer 2

I @ Vanojx1 Code aktualisiert werden 2 Lösungen vorzuschlagen:

• mit reselect nur
• mit reselect + re-reselect (memoization zu halten, wenn id Änderungen zur Verfügung gestellt)

(Disclaimer: Ich bin der Autor wieder neu wählen, aber dies ist ein typischer Anwendungsfall)

Code-Basis

let state = { 
    items: [ 
     { id: 1, parent: null, children: [2, 3] }, 
     { id: 2, parent: 1, children: [4] }, 
     { id: 3, parent: 1, children: [], value: 10 }, 
     { id: 4, parent: 2, children: [], value: 20 } 
    ] 
}; 

function getSum(items, id) { 
    let item = items.find(item => item.id == id); 
    return item.hasOwnProperty('value') ? item.value : item.children.reduce((current, next) => { 
    return current + getSum(items, next); 
    }, 0); 
} 

Lösung 1 - nur

import { createSelector } from 'reselect'; 

const getSumSelector = createSelector(
    (state) => state.items, 
    (state, id) => id, 
    (items, id) => getSum(items, id) 
); 

getSumSelector(state, 1); 
// Loses memoization with sequentials calls with same items but different id's 

erneut auswählen

Lösung - erneut auswählen + Wieder erneut auswählen

import createCachedSelector from 're-reselect'; 

const getSumSelector = createCachedSelector(
    state => state.items, 
    (state, id) => id, 
    (items, id) => getSum(items, id) 
)(
    // Cache selector by id 
    (state, id) => id 
); 

getSumSelector(state, 1);