ReactJS: Best Practice von Requisiten und Zustand

Question

Ich begann vor kurzem mit react-Redux, um meine Front-End-App zu bauen, aber während ich Komponenten schrieb, fühlte ich mich verwirrt auf Requisiten und Staaten.

Zum Beispiel:

• heißt es: content, type
• Funktionen: changeContent, changeType, fetchResult.
• Requisiten: fetched_result.

Die Struktur der Komponente:

<Layout> 
    <Header/> 
    <SearchContent /> 
    <SearchType /> 
    <SearchButton /> -> call axios to get result 
    <View /> 
    <Chart /> 

---

Current Layout.js definiert alle Funktionen.

changeContent(e) { 
    this.setState({"content": e.target.value,}); 
} 
changeType(e) { 
    this.setState({"type": e.target.value,}); 
} 
fetchResult() { 
    this.props.dispatch(fetchResultAction(this.state.content, this.state.type)).then(()=>{...}); 
} 

Und ich habe alle state und props in jeder Komponente.

<Header 
    changeType={this.changeType.bind(this)} 
    changeContent={this.changeContent.bind(this)} 
    fetchResult={this.fetchResult.bind(this)} 
/> 
    <SearchContent 
    changeContent={this.props.changeContent} 
    /> 
    <SearchType 
    changeType={this.props.changeType} 
    /> 
    <SearchButton 
    fetchResult={this.props.fetchResult} 
    /> 
<View 
    type={this.state.type} 
    result={this.props.fetched_result} 
/> 

Sicher funktioniert jede Komponente gut. Alle mit dem Code verbundenen Status werden jedoch in Layout geschrieben.

---

In diesem einfachen Fall ist es gut, wenn ich fetchResult mit Argumenten definieren:

//this can be defined in any component 
fetchResult(content, type) { 
    this.props.dispatch(fetchResultAction(content, type).then(()=>{...}); 
    const { fetched_result } = this.props; 
    //I need to define a new "changeResult" function and "result" state in Layout 
    this.changeResult(fetched_result); //pass result back to layout state 
} 

Dann kann ich diese Funktion in jeder Komponente verwenden, um mit Zustand übergeben.

Allerdings haben die echte App viele Komponenten mit komplexen Beziehungen. Ich konfrontiert viele Kupplungsprobleme, während ich Layout-Funktion in unter Komponenten aufgeteilt.

Zum Beispiel verwendet fetchResult den Status searched.

//this is defined in Layout 
fetchResult() { 
    this.props.dispatch(fetchResultAction(this.state.content, this.state.type).then(()=>{ 
    if(this.state.searched==false){ 
     this.setState({"searched": true}); 
    } 
    }); 
} 

Wenn ich noch die zweite Art und Weise zu tun, kann ich brauche mehr Staaten zu definieren und passieren und changeXXX Funktionen in Komponenten.

Ich hoffe, jemand kann mir einige Best Practices von Requisiten geben.

1. definieren statechangeState und in den äußersten Komponenten und definiert damit verbundene Funktion in jeder inneren Komponente.
2. Definieren all state related function in den äußersten Komponenten und Weitergabe an innere Komponenten als Requisiten.

Answer 1

Nun, indem Sie Ihren Code suchen, ist es richtig aussehen. Meiner Erfahrung nach würde ich ein Muster vorschlagen, dem Sie folgen können, um die komplexe Anwendung in react-redux zu erstellen.

Hier sind einige Vorschläge, die Sie in Ihre Anwendung folgen können.

1. Erstellen Sie immer Dummy-Komponenten und Container-Komponenten.

Dummy Component: Komponente, die zB sehr wiederverwendbar sind. Textfeld kann eine Dummy-Komponente sein. In Ihrem Fall Suchknopf, Kopfzeile, kann eine Dummy-Komponente sein. Diese Komponente sollte rein sein und keine Aktionslogik enthalten. Diese Komponente erhält immer Daten als Requisiten aus der Container-Komponente. In dieser Komponente sollten wir Callback-Handler verwenden zB Textfeld hat Onchange-Methode, die den Wert an die Container-Komponente übergeben wird.

Behälterkomponente: Komponente, die mehrere Blindkomponenten und einen weiteren Behälter enthalten kann. Die gesamte Aktionslogik wird in der Containerkomponente platziert. zB. Formulare, in Ihrem Fall seine Layout-Seite (ich würde vorschlagen, dass Sie separate Container-Komponente erstellen und diese Container-Komponente in Layout einfügen).

Hinweis: Container-Komponente sollte direkt binden mit Redux-Zustand.

Die Container-Komponente sollte den Ersteller der Aktion verwenden, um den erforderlichen Wert für den API-Aufruf zu übergeben oder den Redux-Status zu aktualisieren.

2.Aktionsersteller: Aktionsersteller immer in separate Datei speichern. Diese Aktionsmethode sollte für den Ajax-Aufruf, das Redux-Status-Management verantwortlich sein. zB. Das Benutzerformular sollte eine separate Aktionserstellerdatei haben, die (Methode hinzufügen, bearbeiten, löschen für das Formular) haben wird. Es wird Ihnen auch helfen, das komplexe Szenario so gut wie Ihr Container sauber zu halten.

Hinweis: Wenn die Aktionsmethode sehr wiederverwendbar ist, können Sie diese Methode an einem gewöhnlichen Ort aufbewahren.

Vorschlag: Sie sollten die ganze schwere Logik in der Aktion Creator behalten. (Es wird Ihnen helfen, eine minimale Logik im Container zu haben und Ihr Container wird sauber sein).

zB. Wenn Sie das Benutzerformular speichern möchten, und beim Speichern Sie den Spinner zeigen und nach speichern Sie eine Botschaft zeigen wollen und dann eine andere Operation, dann können Sie alle Aktionen innerhalb einer Funktion setzen

export function Save() { 
    return function (dispatch, getStore) { 
      dispatch({ type: START_SPINNER, data: true }) 
     axiosRequest(dispatch, req1).then(function (data) { 
      dispatch({ type: STOP_SPINNER, data: true }) 
      dispatch({ type: SHOW_SUCESSMESAGE, data: 'SAVED SUCCESSFULLY' }); 
      dispatch({type: CLOSE_FORM, data: {close:true}) 
     }) 
    } 
} 

. Wenn Sie mehrere Requisiten innerhalb der Komponente übergeben müssen, verwenden Sie die ES6-Methode {... props}, um sie zu übergeben, anstatt die einzelnen Eigenschaften manuell zu übergeben.

. Ihr Reducer sollte sehr flach sein. Nur sollte es die Update-Logik für den Redux-Zustand enthalten.

. Verwenden Sie redux state more anstelle von react state, um die globalen Daten zu verwalten (die Daten, die auf der gesamten Seite verwendet werden können).

können Sie weitere Informationen finden Sie hier

http://redux.js.org/docs/basics/ExampleTodoList.html

https://www.codementor.io/reactjs/tutorial/intro-to-react-redux-pros

Wenn Sie erkunden, gibt es mehrere Bibliotheken, in denen Sie die Codierungsstil finden.