2016-03-20 16 views
0

Ich bin neu in redux und schreibe eine Frontend-Anwendung, die einen globalen Zustand hält, der beim Start über Ajax abgerufen und dann via Poll/Push aktualisiert wird, wenn neue Daten abgerufen werden. Bei der Navigation zu jeder URL gibt es einen Aktor, der eine Aktion ausführt, die dann einen Reduzierer aufruft, der einen Teil des viewState Objekts mit einer gefilterten Sicht auf diese globalState überschreibt. z.B. Navigation auf die URL /items/filter/a würde die viewState an folgende einstellen:React & Redux Anwendungsdesign

state { 
    viewState: { 
      items: [{id: 1, value: 'a'}] 
    } 
    globalState: { 
      items: [{id: 1, value: 'a'}, 
        {id: 2, value: 'b'}, 
        {id: 3, value: 'c']} 
    } 
} 

Nach diesem Schritt wird dann ReactDOM.render() über einen anderen Schauspieler und alle Komponenten neu rendern mit den aktualisierten Werten in viewState genannt (dies ist nicht mein Code Es ist direkt aus dem Einhorn-Starter-Paket)

Ich frage mich, a) ob dies eine sinnvolle Möglichkeit ist, eine Anwendung dieses Typs zu strukturieren. und b) was ist der beste Weg, um die globalState Variable auf Anfrage bootup der Initialisierung und dann nach Updates zu hören (was möglicherweise dann würde die viewState aktualisieren, wenn das Objekt mit dieser ID ist derzeit in den viewState)

+0

http://stackoverflow.com/a/35316147/5902017 –

Antwort

1

ich habe nicht Erfahrung mit Redux, da wir in unserem Projekt Plain-Vanilla Flux verwendet haben, aber wir haben ein ähnliches Szenario, und unsere Lösung könnte auch zu Ihrem Szenario passen.

Generell denke ich, das ist eine gute Strategie für die Segmentierung Ihres globalen Staates. Es gibt auch Bibliotheken, die das tun (wie Facebook Relay zum Beispiel), die Ihnen diese Funktionalität und mehr Out-of-the-Box geben können.

über die Wiedergabe des Anfangszustandes, was wir getan haben ist, alle unsere Komponenten einrichten ein leere Daten verarbeiten gesetzt gut, das heißt, wenn sie keine Daten (beim erstmaligen render) erhalten sie nur leere div s und einen Lader machen. Wenn dann alle Daten vom Server abgerufen wurden (wir verwenden Versprechungen für die Synchronisation mit der Q-Bibliothek), führen wir eine Aktion BeginRender aus, die bewirkt, dass alle Speicher, die jetzt mit Daten gefüllt sind, ein Änderungsereignis auslösen. Die für die Stores abonnierten Komponenten empfangen das Ereignis und rufen die Speichermethoden zum Abrufen der Daten auf. Sobald die neuen Daten empfangen werden, wird der Komponentenstatus aktualisiert und die Komponenten werden mit den Daten neu gerendert.

+0

wirklich interessante Sachen! Vielen Dank für die Relay Link sieht sehr vielversprechend – Barry

+0

Sicher Ding. Wir begannen, das Gleiche zu tun, fanden aber Relay, was uns all das und noch viel mehr gab. Hat uns eine Tonne Zeit gerettet. –

Verwandte Themen