Datenmodellierung mein Geschäft in Redux

Question

Betrachten Sie dies:

Ich habe eine Anwendung, die am Ende wird ziemlich groß. Es ist ein Dashboard, mit dem Sie auf verschiedene Dienstprogramme zugreifen können, von denen eine eine Todo-App ist.

Wenn ich nur gerade einen To-do-App bauen gehe, dann würde mein Zustand Objekt wie so aussehen:

{ todos:[], completed:false, todoInput:''};

todoInput zu einem Formularfeld gebunden werden würde, und, und fügen Sie nach dem Klicken, wäre es Ändern Sie das Array todos und schalten Sie das Feld completed um. Also meine combineReducers() Funktion würde so aussehen.

combineReducers({todos,completed,todoInput});

Dies würde Sinn machen, weil alle den Staat auf das To-do-App relevant ist, weil es einfach ein To-do-App ist.

Jetzt, da ich eine viel kompliziertere Anwendung erstellen, die auch einen ToDo-App hat, ist dies, wie mein Zustand möglicherweise aussehen würde:

{ 
    otherState:'',evenMoreState:[]',evenMore:{}, 

    todo:{ todos:[], completed:false, todoInput:''} 
} 

Wie Sie mich sehen können todos in ein separates Objekt getrennt jetzt, so ist es eingekapselt und mehr organisiert. Also ich habe 2 Fragen.

1) Ist das eine gute Idee? Es scheint der logische Schritt zu sein, da meine Anwendung an Größe zunimmt und ich nicht möchte, dass alle Teile des Zustands als Eigenschaften für das Hauptzustandsobjekt herumschweben. Habe ich das richtig gemacht?

2) Meine Mähdrescher-Reduzierer (soweit ich weiß) können kein verschachteltes Objekt aufnehmen. So wird es jetzt so aussehen.

combineReducers({ otherState,evenMoreState,evenMore,todo})

so jetzt wird meine Minderer Zusammensetzungen haben im Inneren des Minderer getan werden, die die To-do-Zustand behandelt. Gibt es einen besseren/anderen Weg, dies zu tun?

Danke

Answer 1

Ja, Sie sind absolut auf dem richtigen Weg. verwenden Es ist auch erwähnenswert, dass Sie combineReducers mehrere Male, wie zum Beispiel: wenn gewünscht

const rootReducer = combineReducers({ 
    otherState : otherStateReducer, 
    todos : combineReducers({ 
     todos : todosReducer, 
     completed : todosCompletedReducer, 
     todoInput : todoInputReducer 
    }) 

Der Gesamt todos Abschnitt getrennt, und importiert und in der obersten Ebene combineReducers Aufruf definiert werden könnten verwiesen. });

Sie können durch die Redux docs section on "Structuring Reducers" für weitere Informationen über Möglichkeiten zur Organisation Reducer Logik, sowie die Redux FAQ on organizing nested state lesen. Darüber hinaus haben die Redux Techniques und Redux Architecture Abschnitte meiner React/Redux links list Links zu einer Vielzahl von Artikeln über den Bau von realen Redux-Anwendungen.