Redux - JavaScript-Bibliothek

Was ist Redux?

• Redux ist ein vorhersehbarer Statuscontainer, mit dem Sie JavaScript-Apps schreiben können, die sich in Client-, Server- und nativen Umgebungen konsistent verhalten und einfach zu testen sind.
• Redux wurde von Dan Abramov im Juni 2015 erstellt. Es wurde von Facebooks Flux und der funktionalen Programmiersprache Elm inspiriert. Redux wurde aufgrund seiner Einfachheit , geringen Größe (nur 2 KB) und großartigen Dokumentation sehr schnell populär .

Die Vorhersagbarkeit von Redux wird durch die drei wichtigsten Prinzipien bestimmt, die unten angegeben sind -

1. Einzelne Quelle der Wahrheit - Der Status Ihrer gesamten Anwendung wird in einem Objektbaum in einem einzelnen Speicher gespeichert . Da der gesamte Anwendungsstatus in einem einzigen Baum gespeichert ist, wird das Debuggen vereinfacht und die Entwicklung beschleunigt.
2. Status ist schreibgeschützt - Die einzige Möglichkeit, den Status zu ändern, besteht darin, eine Aktion auszugeben , ein Objekt, das beschreibt, was passiert ist. Dies bedeutet, dass niemand den Status Ihrer Anwendung direkt ändern kann.
3. Änderungen werden mit reinen Funktionen vorgenommen - Um festzulegen, wie der Statusbaum durch Aktionen transformiert wird, schreiben Sie reine Reduzierungen . Ein Reduzierer ist ein zentraler Ort, an dem Zustandsänderungen stattfinden. Ein Reduzierer ist eine Funktion, die den aktuellen Status und die auszuführende Aktion übernimmt. Die Funktion muss einen neu aktualisierten Status zurückgeben, keine geänderte Version des vorhandenen Status .

Redux besteht aus drei Teilen: Aktionen , Speicher und Reduzierungen .

Aktionen in Redux

Kurz gesagt, Aktionen sind Ereignisse . Nur so können Sie Daten aus Ihrer Anwendung an Ihren Redux-Store senden. Die Daten können aus Benutzerinteraktionen, internen Ereignissen wie API-Aufrufen oder sogar Formularübermittlungen stammen.

• Aktionen sind einfache JavaScript-Objekte und müssen eine type- Eigenschaft (normalerweise konstant) haben, um den Typ der auszuführenden Aktion anzugeben. Sie müssen auch eine Nutzlast haben , die die Informationen enthält, an denen die Aktion arbeiten soll.

{ 
  type: "LOGIN",
  payload: {
    username: "Ayush",
    password: "12345"
  }
}

const setLoginStatus = (name, password) => {
  return {
    type: "LOGIN",
    payload: {
      username: "Ayush",
      password: "12345"
    }
  }
}

store.dispatch(setLoginStatus(name, password));

• Dies ist der einzige Ort, an dem Sie Logik und Berechnungen schreiben können. Die Reduzierungsfunktion akzeptiert den vorherigen Status der App und die Aktion, die ausgelöst wird, berechnet den nächsten Status und gibt das neue Objekt zurück.
• Die folgenden paar Dinge sollten niemals innerhalb des Reduzierers ausgeführt werden - Mutation von Funktionsargumenten, API-Aufrufen und Routing-Logik und Aufrufen nicht reiner Funktionen, z. B. Math.random ()
• Es basiert auf der reduceFunktion in JavaScript, bei der ein einzelner Wert aus mehreren Werten berechnet wird, nachdem eine Rückruffunktion ausgeführt wurde.

Redux reducer signature
(previousState, action) => nextState
Array.prototype.reduce signature
(accumulator, value) => (accumulator + value)
Example:
const handleAuth = (state = initialState, action) => {
    switch (action.type) {

      // This reducer handles any action with type "LOGIN"
      case "LOGIN":
          return state.map(user => {
              if (user.username !== action.payload.username) {
                  return user;
              }

              if (user.password == action.payload.password) {
                  return {
                      ...user,
                      login_status: "LOGGED IN"
                  }
              }
          });
        default:
          return state;
      } 
};

• Für komplexere Apps ist die Verwendung des combineReducers()von Redux bereitgestellten Dienstprogramms möglich (in der Tat empfohlen). Es kombiniert alle Reduzierungen in der App zu einem einzigen Indexreduzierer. Jeder Reduzierer ist für seinen eigenen Teil des App-Status verantwortlich, und der Statusparameter ist für jeden Reduzierer unterschiedlich. Das combineReducers()Dienstprogramm erleichtert die Pflege der Dateistruktur erheblich.

const rootReducer = combineReducers({
    handleAuth: handleAuth,
    editProfile: editProfile,
    changePassword: changePassword
});

• Ermöglicht den Zugriff auf den Staat über getState();
• Ermöglicht die Aktualisierung des Status über dispatch(action);
• Registriert Hörer über subscribe(listener);
• Behandelt die Aufhebung der Registrierung von Listenern über die von zurückgegebene Funktion subscribe(listener).
• createStore - Funktion kann drei Argumente haben. Ein Reduzierer ist eine Funktion, die den nächsten Status der App zurückgibt. Ein vorinstallierter Status ist ein optionales Argument und der Anfangszustand Ihrer App. Ein Enhancer ist auch ein optionales Argument. Es wird Ihnen helfen, das Geschäft mit Funktionen von Drittanbietern zu erweitern.

Syntax - createStore(reducer, [preloadedState], [enhancer])
Example:
import { createStore } from ‘redux’;
import rootReducer from './reducers/index';
const store = createStore(rootReducer);

store.dispatch(setLoginStatus(‘alex’, ‘123456’));

• Redux selbst ist synchron. Wie funktionieren asynchrone Vorgänge wie Netzwerkanforderungen mit Redux? Hier sind Middleware nützlich.

• Wie bereits erwähnt, sind Reduzierer der Ort, an dem die gesamte Ausführungslogik geschrieben wird. Reducer hat nichts damit zu tun, wer es ausführt, wie viel Zeit es dauert oder den Status der App vor und nach dem Auslösen der Aktion zu protokollieren. In diesem Fall bietet die Redux-Middleware-Funktion ein Medium für die Interaktion mit ausgelösten Aktionen, bevor sie den Reduzierer erreichen.
• In der Regel werden Middlewares verwendet, um asynchrone Aktionen in Ihrer App zu verarbeiten. Redux bietet eine API namens applyMiddleware , mit der wir sowohl benutzerdefinierte Middleware als auch Redux-Middleware wie Redux-Thunk und Redux-Saga verwenden können . Und dies kann angewendet werden, um wie folgt zu speichern:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(rootReducer, applyMiddleware(thunk));

function getUser() {
   return function() {
      return axios.get('/get_user_details');
   };
}

Syntax - ({ getState, dispatch }) => next => action
function simpleMiddleware({ getState, dispatch }) {
  return function(next){
    return function(action){
      // processing
      const nextAction = next(action);
      // read the next state
      const state = getState();
      // return the next action or you can dispatch any other action
      return nextAction;  
    }
  }
}
const store = createStore(rootReducer , initialState=[ ] , applyMiddleware(simpleMiddleware));

• Vorhersagbarkeit des Ergebnisses - Es gibt immer eine Quelle der Wahrheit, den Speicher, ohne Verwirrung darüber, wie der aktuelle Status mit Aktionen und anderen Teilen der Anwendung synchronisiert werden soll.
• Wartbarkeit - Ein vorhersehbares Ergebnis und eine strenge Struktur erleichtern die Wartung des Codes. Auf diese Weise können Sie auch Ihre Geschäftslogik von Ihrem Komponentenbaum trennen. Bei großen Apps ist es wichtig, dass Ihre App vorhersehbarer und wartbarer bleibt.
• Organisation - Redux legt strenger fest, wie Code organisiert werden soll, wodurch Code konsistenter und für ein Team einfacher zu bearbeiten ist.
• Server-Rendering - Dies ist sehr nützlich, insbesondere beim ersten Rendern, um eine bessere Benutzererfahrung oder Suchmaschinenoptimierung zu erzielen. Übergeben Sie einfach den auf dem Server erstellten Speicher an die Clientseite.
• Entwicklertools - Entwickler können alles, was in der App vor sich geht, in Echtzeit verfolgen, von Aktionen bis hin zu Statusänderungen. Sie erhalten Live-Code-Bearbeitung in Kombination mit einem zeitreisenden Debugger.
• Community und Ökosystem - Dies ist ein großes Plus, wenn Sie eine Bibliothek oder ein Framework lernen oder verwenden. Eine Community hinter Redux zu haben, macht die Verwendung noch attraktiver.
• Einfaches Testen - Die erste Regel beim Schreiben von testbarem Code besteht darin, kleine Funktionen zu schreiben, die nur eines tun und unabhängig sind. Der Code von Redux besteht hauptsächlich aus Funktionen, die genau das sind: klein, rein und isoliert.
• Leistungsvorteile - Sie können davon ausgehen, dass das Beibehalten des globalen Status der App zu Leistungseinbußen führen würde. Dies ist weitgehend nicht der Fall. React Redux implementiert viele Leistungsoptimierungen intern, sodass Ihre eigene verbundene Komponente nur dann erneut rendert, wenn dies tatsächlich erforderlich ist.

• Ein letzter nützlicher Schritt für die Arbeit mit Redux ist die Installation und Initiierung der eigenen Entwicklungstools von Redux. Wenn Sie Chrome verwenden, können Sie Redux DevTools über den folgenden Link aktivieren:
• Aber es gibt noch einen Schritt, um es zum Laufen zu bringen. In unserer createStoreMethode müssen wir nach unserem Reduzierer Folgendes als Argument übergeben : window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()(). Mit diesem Zusatz store.jssollte so aussehen:

import { createStore } from 'redux';
import reducer from './reducers';
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
export default store;