Server-seitiges Rendern mit Reagieren mit einer zufällig erzeugten Zeichenkette?

Ich versuche das serverseitige Rendering zum ersten Mal in meiner React/Redux App. Ein Problem, das ich gerade habe, ist, dass ich den Anfangszustand brauche, um eine zufällig generierte Zeichenkette zu haben und sie dann als Stütze an meine Hauptkomponente App zu übergeben. Dies verursacht offensichtlich ein Problem, da es unterschiedliche Zeichenfolgen für den Client und den Server generiert. Gibt es etwas, was ich tun kann, um dieses Problem zu verhindern?Server-seitiges Rendern mit Reagieren mit einer zufällig erzeugten Zeichenkette?

Grundstruktur mit Verständnis helfen:

App.js

import React from 'react'; 
import { connect } from 'react-redux'; 

const App = ({ randomStr }) => (
    <div> 
    <p>{randomStr}</p> 
    </div> 
); 

const mapStateToProps = (state) => ({ 
    ... 
}); 

const mapDispatchToProp = (dispatch) => ({ 
    ... 
}); 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(App);

Und mein Minderer:

reducer.js

import { generateString } from '../util'; 
import { NEW_STRING } from '../constants'; 

const stringReducer = (state = generateString(), action) => { 
    switch (action.type) { 
    case NEW_STRING: 
     return generateString(); 

    default: 
     return state; 
    } 
}; 

export default stringReducer;

Wie Sie c ein sehen, ich bekomme die randomStr von meinem Redux-Shop und Rendering, aber es ist anders in Client und Server. Jede Hilfe wäre willkommen!

Quelle

2016-07-21 saadq

Was ist der Code von generateString? –

"Dinge, die Sie nie in einem Reduzierer tun sollten: Mutate seine Argumente; Führen Sie Nebenwirkungen wie API-Aufrufe und Routing-Übergänge; ** Aufruf nicht-reine Funktionen **, zB Date.now() oder Math.random() . " Und 'generateString', das keine Argumente akzeptiert und eine Zeichenfolge zurückgibt, ist entweder eine Konstante oder unrein. –

Oh, ich verstehe was du sagst. Ich habe meinen Code so korrigiert, dass ich 'generateString()' nicht mehr im Reducer verwende, sondern als Initialzustand, wenn ich den Store erstelle. Allerdings habe ich immer noch das Problem, dass es für den Client und den Server anders generiert, so dass es, wenn es als Property übergeben wird, Probleme verursacht (http://i.imgur.com/KCdb44i.png). Gibt es einen Weg dazu? – saadq

Wenn Sie den Speicher und Ihren Ausgangszustand auf der Serverseite generieren, sollte der Client nicht dasselbe tun und versuchen, die Daten neu zu generieren.

Sie müssen Ihren Speicher und Ihren Anfangszustand nur einmal (auf dem Server) generieren und an den Client weitergeben. Um dies zu tun, müssen Sie es in die ursprüngliche Komponente einfügen, die Sie rendern werden.

Der am häufigsten verwendete Ansatz besteht darin, ein <script>-Tag hinzuzufügen und den Status an Ihr Fenster anzuhängen, beispielsweise in window.__initialState.

Zum Beispiel, wenn Sie ReactDOM.renderToString auf der Server-Seite verwenden Ihre erste Komponente Html genannt zu machen, können Sie:

const html = ReactDOM.renderToString(<Html initialState={initialState} />);

Dann in Ihrem Html Komponente, können Sie diese Daten so den Kunden injizieren können sie später:

<script dangerouslySetInnerHTML={{ __html: `window.__initialState=${JSON.stringify(this.props.initialState)};` }}/>

Danach wird auf der Client-Seite können Sie window.__initialState benutzen, um Ihre Daten zurückzubekommen, und Sie werden mit den gleichen Daten auf dem Server und dem Client beenden.

Quelle

2016-07-24 08:59:08 HiDeo

Vielen Dank, das hat für mich geklappt. – saadq

Server-seitiges Rendern mit Reagieren mit einer zufällig erzeugten Zeichenkette?

Antwort

Verwandte Themen