React/Redux: Wo erstelle ich + den Anwendungszustand 'Master'?

Question

Ich beginne mit Redux in eine React-Anwendung zu ziehen, aber ich habe Probleme zu verstehen, wo genau mein 'Master State Design' verwendet wird.

Für den Kontext denke ich an den App-Status als ein riesiger Baum, und ich habe Reduzierungen, die sich um kleine Teile des Baumes kümmern. Ich habe ein wenig darüber nachgedacht, wie ich den Zustandsbaum darstellen soll, und ich habe eine Variable initialState, die im Grunde ein Immutable.js-Objekt mit einer Reihe von Kind-Objekten ist, die die verschiedenen Teile meines App-Status enthalten.

Ich habe meine Reducer auf diese verschiedenen Teile meiner App aufgeteilt, aber ich habe Probleme zu verstehen, wie der Riese, Master State Tree erstellt wird. Ich verstehe, dass jeder Reducer den gesamten State Tree + Action einbezieht und einen neuen Status basierend auf der Aktion zurückgibt, aber ich verstehe nicht, wo der "Initial State" platziert werden soll, wenn der Status undefined ist.

Mit anderen Worten: Ist ein einzelner Reduzierer dafür verantwortlich, den gesamten Zustandsbaum zu erstellen, wenn er ursprünglich undefiniert ist (und wenn ja, wo sollte dieser Reduzierer leben)? Oder sollte ein Reducer der initialState Variablen ein undefiniertes Statusargument zuweisen?

Answer 1

Wenn Sie combineReducers verwenden, müssen Sie nicht die "root" erstellen. Die von combineReducers zurückgegebene Funktion ist selbst ein Reducer und erstellt automatisch die Wurzel Ihres Statusbaums mit einer "Verzweigung" (Eigenschaft) für jeden der Reduzierungen, die Sie übergeben haben. Ihre Reduzierer müssen sich nur darum kümmern, ihren eigenen Zweig mit zu initialisieren ein Anfangszustand.

Wenn Sie nicht combineReducers verwenden, denke ich, dass jeder Reducer sich nur um den Teil des Zustandsbaums kümmern sollte, auf den er wirkt. Wenn Sie diesen in einen einzigen "Master" -Reduzierer umwandeln, wird unnötigerweise der zugehörige Code aufgespalten, sodass Ihre App schwieriger zu argumentieren ist.

Answer 2

Wie in den Beispielen in der official guide veranschaulicht Sie können einen Standardwert für das erste Argument des Reduzierers verwenden, der Ihr Ausgangszustand sein wird.

function todoApp(state = initialState, action) { 
    switch (action.type) { 
    case SET_VISIBILITY_FILTER: 
     return Object.assign({}, state, { 
     visibilityFilter: action.filter 
     }) 
    case ADD_TODO: 
     return Object.assign({}, state, { 
     todos: [ 
      ...state.todos, 
      { 
      text: action.text, 
      completed: false 
      } 
     ] 
     })  
    default: 
     return state 
    } 
} 

Dieser Anfangszustand kann ein Standardwert sein, der im Client-Code fest codiert ist. Oder es können einige Daten vom Server in die HTML-Seite geladen werden. In einer EJS-Vorlage, die auf dem Server gerendert wird, können Sie beispielsweise Folgendes haben:

<script> 
window.INITIAL_STATE = <%= JSON.stringify(initialState) %> 
</script>