La rappresentazione semplice del flusso di dati Redux è:

User interaction dispatches an action --> The reducer updates the state based on the action --> Subscribed components update the UI based on the new state.

Consideriamo la seguente app:

Questo è un semplice esempio di applicazione basata su redux. C'è solo un componente semplice che è collegato al ciclo redux ( Counter ). All'interno abbiamo due pulsanti: incrementa e decrementa . Come probabilmente hai già intuito, questi pulsanti aumenteranno o diminuiranno il valore del contatore .

Ora scopriamo di quali oggetti e funzioni abbiamo bisogno per costruire Redux da zero: — createStore , combineReducers , connect e Provider .

createStore

Un albero di oggetti immutabile e contiene lo stato dell'applicazione. createStore(reducer, state, enhancer): createStoreaccetta reducere come input e genera un stateoggetto .enhancerstore

• getState(): ottieni lo stato del negozio
• dispatch(action): utilizzare reducerper ottenere nuovi statee notificare a ciascun ascoltatore il cambiamento di stato.
• subscribe(listener): ci permette di aggiungere un ascoltatore al filestore

La combineReducersfunzione di supporto trasforma un oggetto i cui valori sono diverse funzioni di riduzione in un'unica funzione di riduzione a cui è possibile passare createStore.. È solo una funzione di utilità per combinare più riduttori in uno e risparmiare tempo per un codice standard. Il suo ruolo è quello di sostituire il seguente snippet:

export default function todoApp(state = {}, action) {
  return {
    filter: filter(state.filter, action),
    todos: todos(state.todos, action)
  }
}
with:
const todoApp = combineReducers({
  filter,
  todos
});

function combineReducers(obj) {  
  return (state = {}, action) => {
    const newState = {};
    for (let key in obj) {
      newState[key] = obj[key](state[key], action);
    }
    return newState;
  }
}
    
      

La connect()funzione collega un componente React a un negozio Redux.

• Fornisce al suo componente connesso le parti dei dati di cui ha bisogno dal negozio e le funzioni che può utilizzare per inviare azioni al negozio.
• Non modifica la classe componente passatagli; invece, restituisce una nuova classe di componenti connessa che racchiude il componente che hai passato.

<Provider />Rende Redux disponibile a tutti i storecomponenti nidificati che sono stati racchiusi nella connect()funzione.

• Poiché qualsiasi componente React in un'app React-Redux può essere collegato, la maggior parte delle applicazioni eseguirà il rendering di un <Provider>livello superiore, con l'intero albero dei componenti dell'app all'interno di Provider.
• Per implementarlo, possiamo utilizzare la nuova API di contesto . Quindi il Provider diventa davvero semplice. L'unica cosa che dobbiamo fare è usare quell'API e passare il negozio :

Conclusione

Abbiamo coperto gli oggetti e le funzioni di base di cui abbiamo bisogno per costruire Redux da zero. Spero che tu l'abbia trovato utile.

Grazie per aver letto :)