Logik zum Laden hinzufügen?

Question

Ich habe eine Redux-Anwendung mit einem "Kampagne" Reducer/Store.

Derzeit habe ich Code wiederholt, um zu überprüfen, ob eine bestimmte Kampagne geladen ist oder einen API-Aufruf benötigt, um Details aus der Datenbank abzurufen. Viel vereinfacht es wie folgt aussieht:

// Reducer ---------- 
export default campaignReducer => (state, action) { 
    const campaignList = action.payload 
    return { 
     items: {... campaignList} 
    } 
} 

// Component ---------- 
const mapStateToProps = (state, ownProps) => { 
    const campaignId = ownProps.params.campaignId; 
    const campaign = state.campaign.items[campaignId] || {}; 

    return { 
     needFetch: campaign.id 
      && campaign.meta 
      && (campaign.meta.loaded || campaign.meta.loading), 
     campaign, 
    }; 
} 

export default connect(mapStateToProps)(TheComponent); 

Jetzt habe ich nicht für needFetch die komplexe Bedingung wiederholen mögen. Ich mag diesen komplexen Code in der Funktion mapStateToProps auch nicht, ich möchte eine einfache Überprüfung haben. So kam ich mit dieser Lösung:

// Reducer NEW ---------- 
const needFetch = (items) => (id) => { // <-- Added this function. 
    if (!items[id]) return true; 
    if (!items[id].meta) return true; 
    if (!items[id].meta.loaded && !items[id].meta.loading) return true; 
    return false; 
} 
export default campaignReducer => (state, action) { 
    const campaignList = action.payload 
    return { 
     needFetch: needFetch(campaignList), // <-- Added public access to the new function. 
     items: {... campaignList} 
    } 
} 

// Component NEW ---------- 
const mapStateToProps = (state, ownProps) => { 
    const campaignId = ownProps.params.campaignId; 
    const campaign = state.campaign.items[campaignId] || {}; 

    return { 
     needFetch: state.campaign.needFetch(campaignId), // <-- Much simpler! 
     campaign, 
    }; 
} 

export default connect(mapStateToProps)(TheComponent); 

Frage: Ist dies eine gute Lösung, oder hat die Redux-Struktur erwartet ein anderes Muster dieses Problem zu lösen?

Frage 2: Sollten wir Getter-Methoden in den Laden, wie store.campaign.getItem(myId) Hygiene hinzufügen (stellen Sie sicher, myid existiert und geladen wird, ..) oder gibt es einen anderen Ansatz für diese in redux hinzufügen?

Answer 1

Ihr Ansatz ist etwas gegen das idiomatische Verständnis des Zustands in redux. You should keep only serializable data in the state, funktioniert nicht. Sonst verlierst du viele der Vorteile von Redox, z.B. dass Sie den Status Ihrer Anwendung sehr einfach im lokalen Speicher speichern oder vom Server hydratisieren können, um vorherige Sitzungen fortzusetzen.

---

Stattdessen würde ich den Zustand in eine separate Bibliothek-Datei extrahieren und sie in die Container-Komponente bei Bedarf importieren:

// needsFetch.js 
export default function needsFetch(campaign) { 
    return campaign.id 
      && campaign.meta 
      && (campaign.meta.loaded || campaign.meta.loading); 
} 

---

// Component ---------- 
import needsFetch from './needsFetch'; 

const mapStateToProps = (state, ownProps) => { 
    const campaignId = ownProps.params.campaignId; 
    const campaign = state.campaign.items[campaignId] || {}; 

    return { 
     needFetch: needsFetch(campaign), 
     campaign, 
    }; 
} 

export default connect(mapStateToProps)(TheComponent); 

Answer 2

Normalerweise sollten Rechenkomponenten für diese Art von Logik verantwortlich sein. Sicher, Ihre Funktion hat eine komplexe bedingte Prüfung, sie gehört genau in Ihre Berechnungskomponente (genauso wie Sie sie gerade haben).

Auch Redux dient nur zur Aufrechterhaltung des Zustands. Es gibt keinen Grund, Methoden hinzuzufügen, um Werte des aktuellen Status in Ihren Reduzierungen abzufragen. Ein besserer Weg wäre ein Modul zum Analysieren Ihres Zustands. Sie können dann den Status an das Modul übergeben und die relevanten Informationen extrahieren. Behalten Sie den Redux/Store-Code im Fokus, um nur einen Zustand zu berechnen.