Reagieren mit Redux Update nur Status

Question

Ich arbeite an der Integration von Redux in einem bereits fertigen SPA mit ReactJS.

Auf meiner HomePage habe ich eine Liste der 4 neuesten Kollektionen die hinzugefügt werden, die ich rendere mit Axios aus meiner Datenbank. Diese werden dann im Redux Store gespeichert und auf der React UI angezeigt.

Mein mapStateToProps in etwa so aussehen:

const mapStateToProps = (state) => ({ 
credentials: credentials(state), 
collections: collections(state) 
}); 

Wo Berechtigungsnachweise irrelevant und Sammlungen ist:

const collections = (state) => { 
if (state.collectionsHomeViewReducer.fetching === true) { 
    return { 
     fetchingCollections: true 
    } 
} 
else if (state.collectionsHomeViewReducer.data) { 
    const response = state.collectionsHomeViewReducer.data; 
    return { 
     collections: response.collections, 
     fetchedCollections: true, 
     fetchingCollections: false 
    } 
} 
else if (state.collectionsHomeViewReducer.fetched === false) { 
    return { 
     fetchedCollections: false, 
     fetchingCollections: false 
    } 
} 
}; 

Was ist das will ich tun: jedes Mal, Aktualisieren Sie den Speicher Zustand Ein anderer Client oder der aktuelle Client fügt eine neue Sammlung hinzu. Außerdem möchte ich nicht, dass die Benutzeroberfläche unmittelbar nach dem Versand aktualisiert wird (Aktion), ich möchte, dass sie aktualisiert wird, wenn ein Benutzer die Seite aktualisiert oder wenn er zu einer anderen Ansicht navigiert und zurückkehrt (ich glaube, was ich zu sagen versuche) wenn componentDidMount aufgerufen wird).

Was habe ich bisher erreicht: Durch die Verwendung von socket.io, ich

socket.emit("updateCollectionsStore") 
socket.on("updateCollectionsStore") 

und

socket.broadcast.emit("updateCollectionsStore") 

in ihren jeweiligen Plätzen in der Anwendung. Der letzte Aufruf von

socket.on("updateCollectionsStore") 

nach der Sendung, ist in der Hauptdatei der Seite, app.jsx wo der Laden befindet sich auch. Die Funktion dort sieht wie folgt aus:

socket.on("updateCollectionsStore",() => { 
store.dispatch(getCollectionsHomeView()); 
}); 

Der Speicher wird aktualisiert und alles funktioniert gut, wie von den Redux Dev Tools aus gesehen.

Was ich nicht herausfinden kann, ist, den Requisiten zu sagen, dass sie sich nicht ändern sollen, weil mapStateToProps jedes Mal aufgerufen wird, wenn eine Aktion ausgelöst wird.

Warum brauche ich das: Die HomePage kann mit einem kontinuierlichen UI-Update und Datenabruf umgehen, aber ich habe auch eine Seite ReadAllPage, wo Sie alle Sammlungen real. Das Problem ist, wenn immer der neueste Beitrag oben ist. Immer wenn ein neuer hinzugefügt wird, wird der aktuelle nach unten geschoben. Für den Fall, dass jemand die Absicht hatte, auf den heruntergedrückten zu klicken, könnte er nun versehentlich auf den geklickt haben, der seinen Platz eingenommen hat, was nicht gewollt ist.

Was sollte ich anders oder weiter machen, um das gewünschte Ergebnis zu erzielen?

Vielen Dank.

Answer 1

Nach Ihren Bedürfnissen würde ich zwei Eigenschaften in diesem Staat haben. Erstens ist das momentan auf der HomeView sichtbar und zweitens wird das über Sockets aktualisiert. Sobald ein Benutzer zum HomeView navigiert, können Sie einfach die erste Sammlung durch die zweite ersetzen.