Ich baue eine React / Redux-App, die ein global verfügbares Objekt (eine Websocket-Lib-Instanz) benötigt. Ich habe ursprünglich versucht, dies im Redux-Statusbaum zu speichern, die Instanz ist jedoch nicht unveränderlich und verursachte viele Probleme beim Neuladen während der Entwicklung (Tonnen von zirkulären Referenzfehlern, die beim Ausführen von kompiliertem Code nicht existieren).
Meine Frage ist, wie diese Instanz gespeichert / erstellt wird, damit sie für meinen Redux-Code und die React-Komponenten verfügbar ist. Ich könnte es ganz oben im Komponentenbaum erstellen und es als Prop nach unten durch den Baum leiten, aber das fühlt sich sehr "schmutzig" an, nachdem ich alles mit react-redux connect gemacht habe.
Gibt es einen besseren Weg, dies zu tun?
Redux Thunk, Autor von gaeron, Autor von redux, seit 2.1.0:
%Vor%Dies ist direkt aus der Dokumentation, siehe den folgenden Link für weitere Informationen:
@ Sheeldotmes Antwort funktioniert gut, wenn Sie Thunks verwenden.
Beachten Sie auch, dass Sie die Instanz möglicherweise nicht als globale Variable benötigen, abhängig von der Websocket-Lib, die Sie verwenden. Zum Beispiel, mit socket.io-client , nach dem ersten Aufruf io(url) , der die Websocket-Verbindung herstellt, werden alle nachfolgenden Aufrufe von io(url) (mit dem gleichen Argument url ) die gleiche Verbindung (dh socket object) zurückgeben Speicher, ohne erneut verbinden zu müssen. Es macht es einfach, eine API zu haben, die Sie einfach import / require verwenden können, anstatt die Instanz herumzugeben oder global zu machen. Weitere Informationen finden Sie in der socket.io-Dokumentation / p>
Zum Beispiel:
socket.js
%Vor% Jetzt können Sie einfach import / require Ihre socket.js -Datei verwenden, um von überall auf das gleiche Socket-Objekt zugreifen zu können.
Tags und Links reactjs redux react-redux