Design Pattern React : The State Reducer

Pour ceux qui connaisse Redux, c'est le même principe, on a une action, un dispatch et un reduceur.

Pour mettre en application ce design pattern on va se servir du Hook useReducer et on va utiliser le 3eme argument du Hook pour mettre un peu de piment. Ce 3eme argument permet d'initier le state à partir d'une props.

const [state, dispatch] = useReducer(reducer, initialArg, init);

Pour ceux qui ne connaissent pas il y a 3 points clés:

1/ Un objet js appelé "Action":

const monAction = { type: 'add', payload: 3}

C'est un objet javascript (tout simplement), qui va contenir par convention (issus de redux) deux propriétés:

• type: généralement un string et est obligatoire.
• paylod: ce qu'on veut et est facultatif.

2/ le dispatcher : dispatch()

C'est une function qui nous est donnée par le Hook useReducer.
Cette fonction va permet d'envoyer une action dans le reducer.

dispatch({type: 'add', payload: 3})}

3/ le reducer: reducer()

Le reducer, c'est une fonction qu'on doit être définis et qui va nous servir à modifier le state.
Dans mon exemple, je m'assure de retourner à chaque fois une nouvelle copie du state (redux).

Cette fonction prend en 1er argument le state et en 2eme argument notre fameuse action.
Le reducer, c'est tout simplement un switch qu'on va faire matcher avec notre action.type et on créer un nouveau state à partir de celui qu'on a passé en paramètre.

Et voilà :)

Implémentation:

Step 1: Initialisation du State

Pour commencer on va initialiser notre state :
useReducer(reducer, propsToInit, init);

useReducer va utiliser la variable propsToInit et va la faire passer dans la fonction init

Step 2: Condition d'initialisation

const init = (initState) => {

  if (initState === null) return { ...defaultState };

  return { count: initState };
};

Notre function init est appelé une seul fois au montage du component. Elle va retourner notre state.

Step 3: Utilisation du dispatch

La fonction useReducer, nous retourne une fonction dispatch.
const [state, dispatch] = useReducer(reducer, propsToInit, init);

Cette fonction va nous permettre de mettre à jours le state, en utilisant une action.

Step 4: Définition des Actions:

const actionAdd = {
type: "add"
};

Rien de compliqué ici, on déclare une constante pour stocker notre action.

Step 5: Mise à jour du state

Ensuite cette action passe dans le reducer, et on modifie le state.

Step 6: Affichage

Le component s'update et la nouvelle valeur s'affiche.