Redux fonctionne comme un conteneur d'état centralisé pour les applications JavaScript.

Ses principes fondamentaux incluent :

• L'état global est structuré en arborescence d'obejts et conservé dans un store unique.
• Les seules modifications d'état résultent de dispatches d'actions.
• Les reducers calculent le nouvel état à partir de l'état précédent et d'une action, sans altérer l'état existant.
• Les changements d'état déclenchent une mise à jour des composants concernés.

Procédure d'implémentation :

Initialisation du store :

import { createStore } from "redux";
import rootReducer from "./reducers";

const appStore = createStore(rootReducer);
export default appStore;

Définition du reducer initial :

const initialState = {
  textValue: 'example',
  items: [10, 20, 30]
};

export default (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

Le store ne modifie pas directement les données. Le reducer applique des transformations basées sur les actions reçues, produisant un nouvel objet état immutable.

Accès au store depuis un composant React :

import appStore from '../store';

Récupération de l'état courant :

this.state = appStore.getState();

Configuration des outils de développement :

import { createStore } from "redux";
import rootReducer from "./reducers";

let storeInstance;

if (window.__REDUX_DEVTOOLS_EXTENSION__) {
  storeInstance = createStore(
    rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__()
  );
} else {
  storeInstance = createStore(rootReducer);
}
export default storeInstance;

Déclenchement d'une modification d'état via une action :

const updateAction = {
  type: "UPDATE_TEXT",
  payload: userInput
};
storeInstance.dispatch(updateAction);

Traitement de l'action dans le reducer :

export default (state = initialState, action) => {
  if (action.type === 'UPDATE_TEXT') {
    const updatedState = JSON.parse(JSON.stringify(state));
    updatedState.textValue = action.payload;
    return updatedState;
  }
  return state;
};

Souscription aux changements d'état dans le composant :

storeInstance.subscribe(this.onStateChange);

onStateChange() {
  this.setState(storeInstance.getState());
}

Pour une meilleure organisation, on sépare les types d'actions et les créateurs d'actions.

Fichier de constantes pour les types :

export const UPDATE_TEXT_ACTION = 'UPDATE_TEXT';

Créateur d'actions typé :

import * as actionTypes from './actionTypes';

export const createTextUpdateAction = newValue => ({
  type: actionTypes.UPDATE_TEXT_ACTION,
  payload: newValue
});

Utilisation dans le composant :

const action = createTextUpdateAction(event.target.value);
storeInstance.dispatch(action);

Principes essentiels de Redux :

• Source de données unique : l'application ne possède qu'un seul store.
• État en lecture seule : les modifications passent obligatoirement par des actions.
• Modifications via fonctions pures : les reducers ne produisent pas d'effets de bord.

APIs principaux :

• createStore
• store.dispatch
• store.getState
• store.subscribe