Redux: libreria JavaScript

Cos'è Redux?

• Redux è un contenitore di stati prevedibile progettato per aiutarti a scrivere app JavaScript che si comportano in modo coerente in ambienti client, server e nativi e sono facili da testare.
• Redux è stato creato da Dan Abramov intorno a giugno 2015. È stato ispirato da Flux di Facebook e dal linguaggio di programmazione funzionale Elm. Redux è diventato popolare molto rapidamente grazie alla sua semplicità , alle dimensioni ridotte (solo 2 KB) e all'ottima documentazione .

La prevedibilità di Redux è determinata dai tre principi più importanti come indicato di seguito:

1. Singola fonte di verità: lo stato dell'intera applicazione è memorizzato in un albero di oggetti all'interno di un singolo archivio . Poiché l'intero stato dell'applicazione è archiviato in un unico albero, semplifica il debug e velocizza lo sviluppo.
2. Lo stato è di sola lettura: l'unico modo per modificare lo stato è emettere un'azione , un oggetto che descrive cosa è successo. Ciò significa che nessuno può modificare direttamente lo stato della tua applicazione.
3. Le modifiche vengono apportate con funzioni pure: per specificare come l'albero degli stati viene trasformato dalle azioni, si scrivono riduttori puri . Un riduttore è un luogo centrale in cui avviene la modifica dello stato. Un riduttore è una funzione che prende lo stato corrente e l'azione da eseguire. La funzione deve restituire uno stato appena aggiornato, non una versione modificata dello stato esistente .

Redux ha tre parti costruttive: azioni , archivio e riduttori .

Azioni in Redux

In poche parole, le azioni sono eventi . Sono l'unico modo per inviare dati dalla tua applicazione al tuo negozio Redux. I dati possono provenire da interazioni utente, eventi interni come chiamate API o persino invii di moduli.

• Le azioni sono semplici oggetti JavaScript e devono avere una proprietà type (solitamente costante) per indicare il tipo di azione da eseguire. Devono inoltre disporre di un payload che contenga le informazioni su cui dovrebbe lavorare l'azione.

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

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

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

• È l'unico posto dove puoi scrivere logica e calcoli. La funzione Reducer accetterà lo stato precedente dell'app e dell'azione inviata, calcolerà lo stato successivo e restituirà il nuovo oggetto.
• Le seguenti poche cose non dovrebbero mai essere eseguite all'interno del riduttore - Mutazione degli argomenti delle funzioni, chiamate API e logica di instradamento e chiamata di funzioni non pure, ad esempio Math.random ()
• Si basa sulla reducefunzione in JavaScript, in cui un singolo valore viene calcolato da più valori dopo che è stata eseguita una funzione di callback.

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;
      } 
};

• Per app più complesse, combineReducers()è possibile (anzi, consigliato) utilizzare l' utility fornita da Redux. Combina tutti i riduttori dell'app in un unico riduttore di indice. Ogni riduttore è responsabile della propria parte dello stato dell'app e il parametro dello stato è diverso per ogni riduttore. L' combineReducers()utilità rende la struttura dei file molto più semplice da mantenere.

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

• Consente l'accesso allo stato tramite getState();
• Consente l'aggiornamento dello stato tramite dispatch(action);
• Registra ascoltatori tramite subscribe(listener);
• Gestisce l'annullamento della registrazione dei listener tramite la funzione restituita da subscribe(listener).
• createStore : la funzione può avere tre argomenti. Un riduttore è una funzione che restituisce lo stato successivo dell'app. Un preloadedState è un argomento facoltativo ed è lo stato iniziale della tua app. Un potenziatore è anche un argomento opzionale. Ti aiuterà a migliorare il negozio con funzionalità di terze parti.

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 stesso è sincrono, quindi come funzionano le operazioni asincrone come le richieste di rete con Redux? Qui i middleware tornano utili.

• Come discusso in precedenza, i riduttori sono il luogo in cui viene scritta tutta la logica di esecuzione. Reducer non ha nulla a che fare con chi lo esegue, quanto tempo impiega o registra lo stato dell'app prima e dopo l'invio dell'azione. In questo caso, la funzione middleware Redux fornisce un mezzo per interagire con l'azione inviata prima che raggiunga il riduttore.
• In genere, i middleware vengono utilizzati per gestire le azioni asincrone nella tua app. Redux fornisce un'API chiamata applyMiddleware che ci consente di utilizzare middleware personalizzato e middleware Redux come redux-thunk e redux-saga . E questo può essere applicato per memorizzare come segue:

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));

• Prevedibilità del risultato - C'è sempre una fonte di verità, l'archivio, senza confusione su come sincronizzare lo stato corrente con le azioni e altre parti dell'applicazione.
• Manutenibilità: avere un risultato prevedibile e una struttura rigida rende il codice più facile da mantenere. Ciò aiuta anche a separare la logica aziendale dall'albero dei componenti. Per le app su larga scala, è fondamentale mantenere l'app più prevedibile e gestibile.
• Organizzazione: Redux è più rigoroso su come dovrebbe essere organizzato il codice, il che rende il codice più coerente e più facile con cui lavorare un team.
• Rendering del server: è molto utile, soprattutto per il rendering iniziale, per una migliore esperienza utente o l'ottimizzazione dei motori di ricerca. Basta passare il negozio creato sul server al lato client.
• Strumenti per sviluppatori: gli sviluppatori possono tenere traccia di tutto ciò che accade nell'app in tempo reale, dalle azioni ai cambiamenti di stato. Ti offre la modifica del codice in tempo reale combinato con un debugger che viaggia nel tempo.
• Comunità ed ecosistema: questo è un enorme vantaggio ogni volta che stai imparando o usando qualsiasi libreria o framework. Avere una comunità dietro Redux lo rende ancora più attraente da usare.
• Facilità di test - La prima regola per scrivere codice testabile è scrivere piccole funzioni che fanno solo una cosa e che sono indipendenti. Il codice di Redux è per lo più funzioni che sono proprio questo: piccolo, puro e isolato.
• Vantaggi in termini di prestazioni: si potrebbe presumere che mantenere lo stato dell'app globale comporterebbe un degrado delle prestazioni. In larga misura, non è così. React Redux implementa molte ottimizzazioni delle prestazioni internamente in modo che il tuo componente connesso venga rieseguito solo quando effettivamente necessario.

• Un ultimo passaggio utile per lavorare con Redux è installare e avviare gli strumenti di sviluppo di Redux. Se utilizzi Chrome, puoi abilitare Redux DevTools seguendo il link sottostante:
• Ma c'è ancora un passo per farlo funzionare. Nel nostro createStoremetodo, abbiamo bisogno di passare la seguente come argomento dopo il nostro riduttore: window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()(). Con questa aggiunta, store.jsdovrebbe apparire così:

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