Verhindern, dass Redux-Thunk Daten erneut anfordert, die sich bereits im Speicher befinden

Question

Ich versuche redux thunk zu verwenden, um asynchrone Aktionen auszuführen, und es aktualisiert meinen Speicher so, wie ich es möchte. Ich habe Daten für meine Charts innerhalb this.props unter Verwendung:

const mapStateToProps = (state, ownProps) => { 
    const key = state.key ? state.key : {} 
    const data = state.data[key] ? state.data[key] : {} 
    return { 
    data, 
    key 
    } 
} 
export default connect(mapStateToProps)(LineChart) 

Wo Daten ein Objekt innerhalb des Speichers ist und jedes Mal, wenn ich einen XHR Anruf ein weiteres Stück von Daten, um es in den Laden geht.

Dies ist die Asynchron und die Sync-Aktion

export function addData (key, data, payload) { 
    return { 
    type: ADD_DATA, 
    key, 
    data, 
    payload 
    } 
} 

export function getData (key, payload) { 
    return function (dispatch, getState) { 
    services.getData(payload) 
     .then(response => { 
     dispatch(addData(key, response.data, payload)) 
     }) 
     .catch(error => { 
     console.error('axios error', error) 
     }) 
    } 
} 

Und das Reduktions:

const addData = (state, action) => { 
    const key = action.key 
    const data = action.data.results 
    const payload = action.payload 
    return { 
    ...state, 
    payload, 
    key, 
    data: { 
     ...state.data, 
     [key]: data 
    } 
    } 
} 

In the tutorial Ich habe zusammen mit (code on github) nach, scheint dies genug, dass, wenn ein Stück Daten, die bereits im Laden existiert, etwa wie, data['some-key'] redux wird die Daten nicht erneut anfordern. Ich bin mir nicht ganz sicher, wie es verhindert wird, aber im Verlauf ist es. Ich mache jedoch definitiv wieder Netzwerkanrufe für Schlüssel, die bereits in meinem Geschäft existieren.

Was ist der Weg, XHR für Daten zu verhindern, die bereits in meinem Geschäft existiert?

Answer 1

Redux selbst unternimmt nichts, um Daten anzufordern oder nur anzufordern, wenn sie nicht zwischengespeichert werden. Aber Sie können Logik dafür schreiben. Hier ist ein Fake-ish Beispiel dafür, was ein typischer „nur Daten anfordern, wenn nicht zwischengespeichert“ thunk könnte wie folgt aussehen:

function fetchDataIfNeeded(someId) { 
    return (dispatch, getState) => { 
     const state = getState(); 
     const items = selectItems(state); 

     if(!dataExists(items, someId)) { 
      fetchData(someId) 
       .then(response => { 
        dispatch(loadData(response.data)); 
       }); 
     } 
    } 
} 

ich auch a gist with examples of common thunk patterns haben, die Ihnen nützlich sein könnten.