DEV Community: José Wheelock

React Desing Pattern: Props Collection and Getters

José Wheelock — Fri, 29 Apr 2022 10:50:28 +0000

Dans ce pattern, l'idée c'est d'envoyer un object de props dans le component:

<Title {...collectionProps} year="2010" />

En définisant un getteur on va avoir plus de flexibilité:


 const getCollectionPropsAdvanced = ({ country, ...other } = {}) => {
    return {
      country,
      city: "Paris",
      ...other
    };
  };

Avec notre fonction, on va pouvoir définir des props par défaut:
{ country, ...other } = {}
Effectuer des actions spécifique sur une props (country), ajouter autant de props qu'on veut (...other).

React Desing Pattern: Control Props

José Wheelock — Fri, 29 Apr 2022 08:27:28 +0000

Pour ce design pattern on va avoir besoin de la notion de 'Controlled Component'.
Prenons comme exemple un formulaire avec un champ input, la valeur et le changement de ce champ est géré par le DOM.
Dans le cas d'un 'Controlled Component', c'est nous qui géront le stockage de la valeur et le onChange.

<input type="text" value={name} onChange={handleName} />

Tout simplement, passons à l'implémentation:

Step 1: Initiation du state
const [name, setName] = useState("");

Step 2: gestion du changement de valeur


const handleName = (event) => {
    setName(event.target.value);
  };

Step 3: controle de l'élément

<input type="text" value={name} onChange={handleName} />

React Desing Pattern: Reusable Style

José Wheelock — Thu, 28 Apr 2022 07:30:55 +0000

On peut définir le css d'un component de deux manières, la 1er in line et la 2eme avec des classes.

On va donc passer en props, le style ou la classe qu'on veut:

const Box = ({ title, styleInLine = {}, classCustom })

Pour la gestion des class, c'est là où ça devient intéressant:


const classNames = [
    boxStyle.default,
    title === "with condition" ? boxStyle.withCondition : "",
    classCustom
  ]
    .join(" ")
    .trim();

On va utiliser un tableau dans lequel on va join et trim pour avoir une sortie du genre: 'class1 class2 class3'.

Ensuite on va pouvoir mettre des conditions dans le tableau pour afficher une class ou non:
title === "with condition" ? boxStyle.withCondition : "",

Et voilà ! c'est pas compliqué et c'est smart !

React Design Pattern: Compound Components

José Wheelock — Tue, 26 Apr 2022 09:38:13 +0000

Ce design pattern est assez simple à mettre en place: on a un component parent qui a des components enfants et ils sont reliés par un context.

Ce qu'on voit généralement en production, c'est un component parent avec des enfants à qui on passe des props.
Ici, l'approche est différente, c'est un component qui est découpé en plusieurs options:


<PreviewModal>
  <PreviewModal.Player />
  <PreviewModal.Info />
  <PreviewModal.Episode />
</PreviewModal>

Dans notre exemple, on a notre component PreviewModal qui mets à disposition plusieurs options : le player, les infos, les épisodes.
Mais ces options font partie uniquement de la previewModal, parce que ils sont fortement liée par un context.

Inplémentation:

Step 1: Création du context


const ModalContext = React.createContext(defaultContext);

Pour l'exemple, j'ai mis en place la forme la plus basique du context, pas de provider value.

Step 2: Création du component parent


const PreviewModal = ({ children }) => {
  return (
    <>
      <p>Preview Modal like Netflix</p>
      {children}
    </>
  );
};

Step 3: Connexion des enfants avec le parent


const { episodes } = useContext(ModalContext);

Bonus:


PreviewModal.Player = Player;
PreviewModal.Info = Info;
PreviewModal.Episode = Episode;

La petite astuce, PreviewModal est un objet js donc on peut lui faire stocker les components.
Je trouve qu'écrire le code de cette manière ça permet de mieux comprendre que la component parents à des "options"

Design Pattern React : Custom Hooks

José Wheelock — Mon, 25 Apr 2022 07:44:07 +0000

Rien de compliqué ici, Le custom Hook commence toujours par 'use', son état est indépendant et permet de partager une logique entre chaque components.

Implémentation:

Step 1: Déclaration du use custom


const useAdd = () => {

  const [count, setCount] = useState(0);

  const add = () => setCount(count + 1);

  return [count, add];
};

Le nom de la fonction doit commencer par 'use' et ensuite on fait ce qu'on veut, on peut utiliser les hooks de react return les valeurs qu'on veut, ect....

Step 2: Utilisation


const [count1, add1] = useAdd();
const [count2, add2] = useAdd();

Le point important à retenir, c'est que chaque instance du hook custom est indépendante.

Design Pattern React : The State Reducer

José Wheelock — Fri, 22 Apr 2022 10:08:02 +0000

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.

Design Pattern React : The State Initialiser

José Wheelock — Mon, 18 Apr 2022 10:11:18 +0000

Ce design pattern permet de déporter la gestion du state dans un custom hook.

On peut l'implémenter en 3 étapes simple:

Step 1 : Définition du defaultState

Soit dans une const ou directement au niveau de l'argument de la fonction

const defaultState = 0;

const useCounter = (initValue = 0) => {}

Step 2: Création du Hook Custom


const useCounter = (initValue = defaultState) => {
  const [count, setCount] = useState(initValue);

  const add = () => setCount(count + 1);

  const reset = useCallback(() => {
    setCount(initValue);
  }, [initValue]);

  return [count, add, reset];
};

Ici on utilise la mémoïsation (useCallback) et on retourne un tableau.

Step3: Utilisation du Hook Custom

Comme avec useState, on va spread le tableau de notre useCounter et y'a plus cas.

const [count, add, reset] = useCounter();