Redux - Überarbeitung der Reduzierlogik und -aktionen

Eines Tages bastelte ich an vielen Redux'a-Dateien, wobei die Dateien logischerweise in Reduzierungen, Aktionen und Typkonstanten von Aktionen herausgenommen wurden. All dies stellte sich als ziemlich schwierige Aufgabe heraus, all diese Arten von Dateien im Kopf zu behalten und die Logik zu verfolgen. Und ... eureka, die Idee kam, das Schreiben der Redux-Logik zu vereinfachen. Vielleicht haben Sie Ihr Fahrrad erstellt, aber wer hat nicht versucht, seine Fahrräder zu schreiben? Aber die Hauptsache ist nicht das Schreiben, sondern das Schreiben von Unterstützung, wenn . Lassen Sie mich versuchen, Ihnen meine Vision meiner Redux-Logik ein wenig zu zeigen.

Starten Sie

Und so haben wir reduziert:

//   import { TODO } from './actions/const'; ..... //      .... //    reducer function todoApp(state = initialState, action) { switch (action.type) { case TODO.SET_VISIBILITY_FILTER: return Object.assign({}, state, { visibilityFilter: action.filter }) case TODO.ADD_TODO: return Object.assign({}, state, { todos: [ ...state.todos, { text: action.text, completed: false } ] }) case TODO.TOGGLE_TODO: return Object.assign({}, state, { todos: state.todos.map((todo, index) => { if (index === action.index) { return Object.assign({}, todo, { completed: !todo.completed }) } return todo }) }) ...          ...            ... default: return state } } 

von Docks auf Redux genommen .

Aktion sieht aus wie:

 //   import { TODO } from './const'; export const addTodo = (value) => ({ type: TODO.ADD_TODO, payload: value }) 

Konstanten Ich denke, es gibt keine Notwendigkeit zu zeigen.

BOOL

Ich werde versuchen, die Raserei zu beschreiben, die ich beim Lesen des Codes erlebe, insbesondere beim Debuggen oder Erweitern der Funktionalität.

• Suche - Sie müssen die ganze Zeit Ctrl + F und global Ctrl + Shift + F drücken
• nicht sofort sichtbar, wo die Beine wachsen. Es ergibt sich aus dem obigen Absatz.
• Nein, das ist nur ein bisschen, also habe ich immer noch das ganze Projekt von Konstanten durchbohrt. Nein, ich bin nicht gegen Konstanten, aber warum? Wenn sie wie im Beispiel zusammen mit der Verschachtelung verwendet werden und aus mehreren verkettet werden, ist dies im Allgemeinen eine Hölle der Navigation.
• Logik ist verschwommen. An einem Aktionsort an einem anderen wird die Verarbeitung dieser Aktionen in der dritten (optionalen) Konstante nur von diesen beiden benötigt.
• Ich muss beim Entwickeln oder Debuggen viele Dateien offen halten. Es ergibt sich aus dem obigen Absatz.
  Nun, etc.

Logikeintrag

Vielleicht wird es auf den ersten Blick seltsam und schockierend erscheinen, aber dennoch scheint es mir, dass dies der richtige Ort ist. Ich werde versuchen, meine Vorlage zu vermitteln.

Reduzierstück

auf Google ausspioniert

Getriebe - ein Mechanismus, der Drehmoment und Leistung ändert. Dies ist ein oder mehrere Gänge, die miteinander interagieren und die Anzahl der Motorumdrehungen auf eine akzeptable Drehzahl des ausführenden Knotens reduzieren.

Das heißt, die Welle hat ein Zahnrad, dieses Zahnrad überträgt die Drehung auf ein anderes Zahnrad, das sich wiederum auf seine Welle dreht. Wir entfernen die Welle und das Zahnrad wird damit entfernt. Sozusagen kein diskontinuierliches Modul.

Wenn Sie die Allegorie weiter ausführen, ist die Welle die Aktion und das Zahnrad die Logik. Daraus folgt, dass das Getriebe als eine solche Verbindung bei der Sicherstellung der Übertragung von Drehmoment, d. H. Daten in der Anwendung, wirkt. Es sollte das ideale Arbeitsumfeld für Mechanismen unterstützen.

Aktion

Wie oben erwähnt, ist dies die Aktion selbst und die Logik, welche Energie übertragen werden soll (in unserem Fall Daten).

Und so lass uns gehen. Mein Fahrrad

Reduzierer:

 export function todoApp(state = initialState, action) { if (typeof action.func === 'function') { return action.func(state); } } 

Ja, das ist alles mein Reduzierer. Im Moment wird es vielleicht eine kleine Lücke in den Mustern geben, wie? wir haben die Logik aus reducer'a genommen ..? Ja Ich sage dir, wir haben die Logik von reducer'a genommen !!!

Werfen wir einen Blick auf die Aktion:

 export function addTodo = (value) => ({ type: 'ADD_TODO' , payload: value, func: (state) =>({...state, value}) }) } 

Aus diesem Grund haben wir die Logik herausgebracht, die für die Übertragung von Daten in den Speicher verantwortlich ist. Der Reduzierer blieb erhalten, um den Betrieb des gesamten Mechanismus sicherzustellen. Und er sollte es gut machen, ohne von Dingen abgelenkt zu werden, die ihn nicht betreffen. Und wir können nur die Reihenfolge beobachten, in der die Beine wachsen, und wenn nötig, dann schnell finden und reparieren oder ergänzen.

Es ist erwähnenswert. Wir haben die Konstanten entfernt. Ja und auch wechseln. Dies ermöglichte es, die Komplexität der O (1) -Ausführung in Reducer'e zu reduzieren.

Dies ist nur eine Beispielskizze, die Sie kombinieren und kombinieren können. Das Erweitern, Ergänzen und Ändern Ihrer Anforderungen ist großartig. Nehmen Sie ein Werkzeug und machen Sie es ideal für Ihre Aufgaben.

Und vor allem möchte ich sagen.

Sei schlau. beee