Gérer l’état d’une application WordPress – la façon dont elle traite et organise les données – peut s’avérer difficile. Au fur et à mesure que votre projet grandit, il devient de plus en plus difficile de suivre le flux de données et d’assurer des mises à jour cohérentes entre les composants. Le paquet de données WordPress peut vous aider à cet égard, car il fournit une solution robuste pour la gestion de l’état.
Cet article se penche sur le paquet de données WordPress, en explorant ses concepts clés, ses stratégies de mise en œuvre et ses meilleures pratiques.
Présentation du paquet de données WordPress
Le paquet de données WordPress – officiellement @wordpress/data – est une bibliothèque de gestion d’état JavaScript (ES2015 et supérieur) qui fournit un moyen prévisible et centralisé de gérer l’état des applications. Une bonne implémentation peut aider à faciliter la construction d’interfaces utilisateur complexes et à gérer le flux de données à travers ton application.
Le paquet de données WordPress s’inspire de Redux, une bibliothèque de gestion d’état populaire dans l’écosystème React.
Ici, le module de données fonctionne dans l’environnement WordPress et propose des intégrations avec des fonctionnalités et des API spécifiques à WordPress. Si vous construisez pour l’éditeur de blocs de WordPress – ou si c’est quelque chose que vous devez prendre en charge – le module sera crucial pour gérer son état. En utilisant les mêmes outils et modèles dans vos propres extensions et thèmes, vous pouvez créer une expérience de développement plus cohérente et familière.
La relation entre le package et Redux
Bien que le paquet de données WordPress s’inspire de Redux, il ne s’agit pas d’un portage direct. Il y a de nombreuses adaptations pour s’adapter à l’écosystème de WordPress, avec quelques différences clés entre les deux solutions :
- Le paquet de données est conçu pour fonctionner de manière transparente avec les API et les fonctionnalités de WordPress, ce que vanilla Redux ne peut pas faire sans cette adaptation.
- Par rapport à Redux, le paquet de données fournit une API plus rationalisée. Cela peut faciliter la prise en main de l’application.
- Contrairement à Redux, le paquet de données comprend une prise en charge intégrée des actions asynchrones. Si vous travaillez avec l’API REST de WordPress, cela vous sera utile.
Le paquet de données WordPress présente également quelques comparaisons avec l’API REST. Bien qu’ils traitent tous deux de la gestion des données, ils servent des objectifs différents :
- L’API REST de WordPress permet d’interagir avec les données de WordPress via HTTP. Vous l’utiliserez pour des applications externes, des configurations WordPress headless, et partout où vous aurez besoin de récupérer et de manipuler des données.
- Le paquet de données WordPress fournit un stockage centralisé pour les données et l’état de l’interface utilisateur. C’est un moyen de gérer le flux de données et les mises à jour dans votre application.
Dans de nombreux cas, vous utiliserez les deux ensemble : l’API REST pour récupérer et mettre à jour les données sur le serveur et le paquet de données WordPress pour gérer ces données au sein de votre application.
Concepts clés et terminologie du paquet de données WordPress
Le paquet de données WordPress offre un moyen intuitif de gérer l’état. Il s’agit des données contenues dans un magasin. Il représente l’état actuel de votre application et peut inclure à la fois l’état de l’interface utilisateur (par exemple s’il y a une fenêtre modale ouverte) et l’état des données (par exemple une liste d’articles).
Dans ce contexte, un magasin est le centre névralgique du paquet de données WordPress. Il contient l’ensemble de l’état du site et fournit les méthodes permettant d’accéder à cet état et de le mettre à jour. Dans WordPress, vous pouvez avoir plusieurs magasins. Chacun d’entre eux sera responsable d’une zone spécifique de votre site.
Pour gérer ces magasins, vous avez besoin d’un registre. Cet objet central fournit des méthodes pour enregistrer de nouveaux magasins et accéder aux magasins existants. Un registre contiendra des magasins, et ces magasins contiendront l’état de votre application.
Il y a plusieurs façons de travailler avec l’état :
- Les actions décrivent les changements apportés à un état. Ce sont de simples objets JavaScript et c’est la seule façon de déclencher des mises à jour d’état. Les actions ont généralement une propriété
type, qui décrit l’action. Elle peut également inclure des données supplémentaires. - Les sélecteurs extraient des éléments spécifiques de l’état du magasin. Ces fonctions vous permettent d’accéder aux données d’état sans qu’il soit nécessaire d’interagir directement avec la structure du magasin. Les résolveurs sont liés et gèrent l’extraction asynchrone des données. Vous les utilisez pour vous assurer que vous pouvez accéder aux données requises dans un magasin avant d’exécuter un sélecteur.
- Les réducteurs spécifient comment l’état doit changer en réponse aux actions. Ils prennent l’état actuel et une action comme arguments et renvoient un nouvel objet d’état. Les fonctions de contrôle permettent aux réducteurs de gérer des opérations asynchrones complexes sans effets secondaires.
Vous devez comprendre ces concepts fondamentaux, car ils fonctionnent tous ensemble pour créer un système de gestion d’état robuste avec les magasins en son cœur.
Les magasins : le centre du paquet de données de WordPress
Les magasins sont les conteneurs de l’état de votre application et fournissent les méthodes pour interagir avec lui. Le paquet de données WordPress regroupe quelques autres paquets, et chacun d’entre eux enregistre des magasins pour le répertoire de blocs, l’éditeur de blocs, le noyau, l’édition d’articles, et plus encore.
Chaque magasin aura un espace de noms unique, comme core, core/editor, et core/notices. Les extensions tierces enregistreront également des magasins, vous devrez donc choisir des espaces de noms uniques pour éviter les conflits. Quoi qu’il en soit, les boutiques que vous enregistrez se trouveront dans le registre par défaut dans la plupart des cas.
Cet objet central a quelques responsabilités :
- Enregistrer de nouveaux magasins.
- Fournir un accès aux magasins existants.
- Gérer les abonnements aux changements d’état.
Bien que vous n’ayez pas souvent d’interaction directe avec le registre, vous devez comprendre son rôle dans la façon dont le paquet de données orchestre la gestion des états dans WordPress.
Interaction de base avec les magasins de données de WordPress
Si vous utilisez ES2015+ JavaScript et que vous travaillez avec une extension ou un thème WordPress, vous pouvez l’inclure en tant que dépendance :
npm install @wordpress/data --saveDans votre code, vous importerez les fonctions nécessaires du paquet en haut du fichier :
import { select, dispatch, subscribe } from '@wordpress/data';L’interaction avec les magasins WordPress existants nécessite que vous utilisiez certaines des fonctions que vous importez. Accéder aux données d’état avec select, par exemple :
const posts = select('core').getPosts();Il en va de même pour l’envoi d’actions :
dispatch('core').savePost(postData);L’abonnement aux changements d’état utilise un format légèrement différent, mais le concept est le même :
subscribe(() => {
const newPosts = select('core').getPosts();
// Update your UI based on the new posts
});Cependant, vous ne travaillerez pas toujours avec les magasins par défaut. Souvent, vous travaillerez avec des magasins supplémentaires existants ou vous enregistrerez vos propres magasins.
Comment enregistrer un magasin de données WordPress
Définir la configuration de votre magasin et l’enregistrer avec le paquet de données WordPress commence par l’importation de la fonction register:
…
import { createReduxStore, register } from '@wordpress/data';
…Celle-ci prend un seul argument – le descripteur de votre magasin. Ensuite, vous devez définir un état par défaut pour le magasin afin de définir ses valeurs par défaut :
…
const DEFAULT_STATE = {
todos: [],
};
…Ensuite, créez un objet actions, définissez une fonction reducer pour gérer les mises à jour de l’état, et crée un objet selectors avec des fonctions pour accéder aux données de l’état :
const actions = {
addTodo: (text) => ({
type: 'ADD_TODO',
text,
}),
};
const reducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [...state.todos, { text: action.text, completed: false }],
};
default:
return state;
}
};
const selectors = {
getTodos: (state) => state.todos,
};Pour créer la configuration du magasin, définissez-la à l’aide de l’objet createReduxStore. Celui-ci initialisera les actions, les sélecteurs, le contrôle et les autres propriétés de votre magasin :
const store = createReduxStore('my-plugin/todos', {
reducer,
actions,
selectors,
});Le minimum dont cet objet a besoin est un réducteur pour définir la forme de l’état et la façon dont il change en réponse à d’autres actions. Enfin, enregistrez le magasin en appelant le descripteur de magasin que vous avez défini avec createReduxStore:
register(store);Vous pouvez maintenant interagir avec votre magasin personnalisé comme vous le feriez avec les autres :
import { select, dispatch } from '@wordpress/data';
// Add a new todo
dispatch('my-plugin/todos').addTodo('Learn WordPress data package');
// Get all todos
const todos = select('my-plugin/todos').getTodos();La clé de l’utilisation du paquet de données WordPress réside dans la façon dont vous utilisez les différentes propriétés et objets à votre disposition.
Décomposer les cinq propriétés du magasin de données WordPress
Une grande partie de l’utilisation du paquet de données WordPress se fait « à l’envers » – en définissant les propriétés de bas niveau du magasin de données avant le magasin lui-même. L’objet createReduxStore en est un parfait exemple, car il rassemble toutes les définitions que vous avez faites pour créer le descripteur que vous utilisez pour enregistrer un magasin :
import { createReduxStore } from '@wordpress/data';
const store = createReduxStore( 'demo', {
reducer: ( state = 'OK' ) => state,
selectors: {
getValue: ( state ) => state,
},
} );Ces autres propriétés doivent également être mises en place et configurées.
1. Actions
Les actions sont le principal moyen de déclencher des changements d’état dans votre magasin. Il s’agit d’objets JavaScript simples qui décrivent ce qui doit se passer. En tant que tel, il peut être judicieux de les créer en premier, car vous pouvez décider des états que vous voulez récupérer.
const actions = {
addTodo: (text) => ({
type: 'ADD_TODO',
text,
}),
toggleTodo: (index) => ({
type: 'TOGGLE_TODO',
index,
}),
};Les créateurs d’actions prennent des arguments facultatifs et renvoient un objet à transmettre au réducteur que vous avez défini :
const actions = {
updateStockPrice: (symbol, newPrice) => {
return {
type: 'UPDATE_STOCK_PRICE',
symbol,
newPrice
};
},Si vous transmetez un descripteur de magasin, vous pouvez envoyer des créateurs d’action et mettre à jour la valeur de l’état :
dispatch('my-plugin/todos').updateStockPrice('¥', '150.37');Considérez les objets d’action comme des instructions pour le réducteur sur la façon d’effectuer les changements d’état. Au minimum, vous voudrez probablement définir des actions de création, de mise à jour, de lecture et de suppression (CRUD). Il se pourrait aussi que vous ayez un fichier JavaScript distinct pour les types d’action et que vous créez un objet pour tous ces types, surtout si vous les définissez comme des constantes.
2. Réducteur
Il vaut la peine de parler du réducteur ici, en raison de son rôle central aux côtés des actions. Son travail consiste à spécifier comment l’état doit changer en réponse aux instructions qu’il reçoit d’une action. Si vous lui transmettez les instructions de l’action et l’état actuel, il peut renvoyer un nouvel objet d’état et le transmettre le long de la chaîne :
const reducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
...state,
todos: [...state.todos, { text: action.text, completed: false }],
};
case 'TOGGLE_TODO':
return {
...state,
todos: state.todos.map((todo, index) =>
index === action.index ? { ...todo, completed: !todo.completed } : todo
),
};
default:
return state;
}
};Notez qu’un réducteur doit être une fonction pure, et qu’il ne doit pas muter l’état qu’il accepte (il doit plutôt le renvoyer avec des mises à jour). Les réducteurs et les actions ont une relation symbiotique à bien des égards, c’est pourquoi il est important de comprendre comment ils fonctionnent ensemble.
3. Les sélecteurs
Pour accéder à l’état actuel d’un magasin enregistré, vous avez besoin de sélecteurs. C’est la principale façon d’« exposer » l’état de votre magasin, et ils aident à garder vos composants découplés de la structure interne du magasin :
const selectors = {
getTodos: (state) => state.todos,
getTodoCount: (state) => state.todos.length,
};Vous pouvez appeler ces sélecteurs avec la fonction select:
const todoCount = select('my-plugin/todos').getTodoCount();Cependant, un sélecteur n’envoie pas ces données n’importe où : il les révèle simplement et y donne accès.
Les sélecteurs peuvent recevoir autant d’arguments que nécessaire pour accéder à l’état avec précision. La valeur qu’il renvoie est le résultat de ce que ces arguments réalisent dans le sélecteur que vous définissez. Comme pour les actions, vous pouvez choisir d’avoir un fichier séparé pour contenir tous vos sélecteurs, car il peut y en avoir beaucoup.
4. Contrôles
C’est pour guider le flux d’exécution des fonctionnalités de votre site – ou pour exécuter la logique à l’intérieur de celui-ci – que vous utilisez des contrôles. Ceux-ci définissent le comportement des flux d’exécution pour tes actions. Considérez-les comme les assistants de l’ensemble des données de WordPress, car ils servent d’intermédiaires pour rassembler l’état à transmettre aux résolveurs.
Les contrôles gèrent également les effets secondaires dans votre magasin, tels que les appels d’API ou les interactions avec les API des navigateurs. Ils vous permettent de garder les réducteurs propres tout en vous permettant de gérer des opérations asynchrones complexes :
const controls = {
FETCH_TODOS: async () => {
const response = await fetch('/api/todos');
return response.json();
},
};
const actions = {
fetchTodos: () => ({ type: 'FETCH_TODOS' }),
};Ce cycle de récupération et de retour des données est crucial pour l’ensemble du processus. Mais sans appel d’une action, vous ne pourrez pas utiliser ces données.
5. Résolveurs
Les sélecteurs exposent l’état d’un magasin, mais n’envoient pas explicitement ces données quelque part. Les résolveurs rencontrent les sélecteurs (et les contrôles) pour récupérer les données. Comme les contrôles, ils peuvent également gérer la récupération asynchrone des données.
const resolvers = {
getTodos: async () => {
const todos = await controls.FETCH_TODOS();
return actions.receiveTodos(todos);
},
};Le résolveur s’assure que les données que vous demandez sont disponibles dans le magasin avant d’exécuter un sélecteur. Cette connectivité étroite entre le résolveur et le sélecteur signifie qu’ils doivent correspondre aux noms. C’est ainsi que le paquet de données de WordPress peut comprendre quel résolveur doit être invoqué en fonction des données que vous demandez.
De plus, le résolveur recevra toujours les mêmes arguments que ceux que vous passez dans une fonction du sélecteur, et il renverra, cédera ou distribuera des objets d’action.
Gestion des erreurs lors de l’utilisation du paquet de données WordPress
Vous devez mettre en place une gestion des erreurs appropriée lorsque vous travaillez avec le paquet de données de WordPress. Si vous choisissez de traiter des opérations asynchrones, de travailler avec des déploiements de pile complète ou de faire des appels d’API, c’est encore plus vital.
Par exemple, si vous envoyez des actions qui impliquent des opérations asynchrones, un bloc try-catch peut être une bonne option :
const StockUpdater = () => {
// Get the dispatch function
const { updateStock, setError, clearError } = useDispatch('my-app/stocks');
const handleUpdateStock = async (stockId, newData) => {
try {
// Clear any existing errors
clearError();
// Attempt to update the stock
await updateStock(stockId, newData);
} catch (error) {
// Dispatch an error action if something goes wrong
setError(error.message);
}
};
return (
<button onClick={() => handleUpdateStock('AAPL', { price: 150 })}>
Update Stock
</button>
);
};Pour les réducteurs, vous pouvez gérer les actions d’erreur et mettre à jour l’état :
const reducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
// ... other cases
case 'FETCH_TODOS_ERROR':
return {
...state,
error: action.error,
isLoading: false,
};
default:
return state;
}
};Lorsque vous utilisez des sélecteurs, vous pouvez inclure une vérification des erreurs pour gérer les problèmes potentiels puis vérifier les erreurs dans tes composants avant d’utiliser les données :
const MyComponent = () => {
// Get multiple pieces of state including error information
const { data, isLoading, error } = useSelect((select) => ({
data: select('my-app/stocks').getStockData(),
isLoading: select('my-app/stocks').isLoading(),
error: select('my-app/stocks').getError()
}));
// Handle different states
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return (
<div className="error-message">
<p>Error loading stocks: {error.message}</p>
<button onClick={retry}>Try Again</button>
</div>
);
}
return (
<div>
{/* Your normal component render */}
</div>
);
};Les fonctions useSelect et useDispatch vous donnent beaucoup de pouvoir pour gérer les erreurs dans le paquet de données de WordPress. Avec ces deux fonctions, vous pouvez passer des messages d’erreur personnalisés en tant qu’arguments.
C’est une bonne pratique de s’assurer que vous centralisez votre état d’erreur lors de la configuration initiale, et de garder les limites d’erreur au niveau des composants. L’utilisation de la gestion des erreurs pour les états de chargement vous aidera également à garder votre code clair et cohérent.
Comment intégrer votre magasin de données WordPress à ton site ?
L’ensemble des données de WordPress peut faire beaucoup pour vous aider à gérer les états. Mettre tout cela ensemble est aussi une considération pratique. Prenons l’exemple d’un téléscripteur d’actions qui affiche et met à jour des données financières en temps réel.
La première tâche consiste à créer un magasin pour vos données :
import { createReduxStore, register } from '@wordpress/data';
const DEFAULT_STATE = {
stocks: [],
isLoading: false,
error: null,
};
const actions = {
fetchStocks: () => async ({ dispatch }) => {
dispatch({ type: 'FETCH_STOCKS_START' });
try {
const response = await fetch('/api/stocks');
const stocks = await response.json();
dispatch({ type: 'RECEIVE_STOCKS', stocks });
} catch (error) {
dispatch({ type: 'FETCH_STOCKS_ERROR', error: error.message });
}
},
};
const reducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
case 'FETCH_STOCKS_START':
return { ...state, isLoading: true, error: null };
case 'RECEIVE_STOCKS':
return { ...state, stocks: action.stocks, isLoading: false };
case 'FETCH_STOCKS_ERROR':
return { ...state, error: action.error, isLoading: false };
default:
return state;
}
};
const selectors = {
getStocks: (state) => state.stocks,
getStocksError: (state) => state.error,
isStocksLoading: (state) => state.isLoading,
};
const store = createReduxStore('my-investing-app/stocks', {
reducer,
actions,
selectors,
});
register(store);Ce processus met en place un état par défaut qui comprend les états d’erreur et de chargement, ainsi que tes actions, réducteurs et sélecteurs. Une fois ces éléments définis, vous pouvez enregistrer le magasin.
Afficher les données du magasin
Avec un magasin en place, vous pouvez créer un composant React pour afficher les informations qu’il contient :
import { useSelect, useDispatch } from '@wordpress/data';
import { useEffect } from '@wordpress/element';
const StockTicker = () => {
const stocks = useSelect((select) => select('my-investing-app/stocks').getStocks());
const error = useSelect((select) => select('my-investing-app/stocks').getStocksError());
const isLoading = useSelect((select) => select('my-investing-app/stocks').isStocksLoading());
const { fetchStocks } = useDispatch('my-investing-app/stocks');
useEffect(() => {
fetchStocks();
}, []);
if (isLoading) {
return <p>Loading stock data...</p>;
}
if (error) {
return <p>Error: {error}</p>;
}
return (
<div className="stock-ticker">
<h2>Stock Ticker</h2>
<ul>
{stocks.map((stock) => (
<li key={stock.symbol}>
{stock.symbol}: ${stock.price}
</li>
))}
</ul>
</div>
);
};Ce composant apporte les crochets useSelect et useDispatch (ainsi que d’autres) pour gérer l’accès aux données, l’envoi des actions et la gestion du cycle de vie des composants. Il définit également des messages d’erreur et d’état de chargement personnalisés, ainsi qu’un peu de code pour afficher réellement le téléscripteur. Une fois ces éléments en place, vous devez maintenant enregistrer le composant auprès de WordPress.
Enregistrer le composant avec WordPress
Sans enregistrement dans WordPress, vous ne pourrez pas utiliser les composants que vous avez créés. Cela signifie que vous devez l’enregistrer en tant que bloc, bien qu’il puisse s’agir d’un widget si vous concevez des thèmes classiques. Cet exemple utilise un bloc.
import { registerBlockType } from '@wordpress/blocks';
import { StockTicker } from './components/StockTicker';
registerBlockType('my-investing-app/stock-ticker', {
title: 'Stock Ticker',
icon: 'chart-line',
category: 'widgets',
edit: StockTicker,
save: () => null, // This will render dynamically
});Ce processus suivra l’approche typique que vous adopterez pour enregistrer des blocs dans WordPress, et ne nécessitera pas de mise en œuvre ou de configuration particulière.
Gérer les mises à jour de l’état et les interactions de l’utilisateur
Une fois que vous avez enregistré le bloc, vous devez gérer les interactions avec l’utilisateur et les mises à jour en temps réel. Cela nécessitera quelques contrôles interactifs, ainsi que du HTML et du JavaScript personnalisés :
const StockControls = () => {
const { addToWatchlist, removeFromWatchlist } = useDispatch('my-investing-app/stocks');
return (
<div className="stock-controls">
<button onClick={() => addToWatchlist('AAPL')}>
Add Apple to Watchlist
</button>
<button onClick={() => removeFromWatchlist('AAPL')}>
Remove from Watchlist
</button>
</div>
);
};Pour les mises à jour en temps réel, vous pouvez configurer un intervalle dans le composant React :
useEffect(() => {
const { updateStockPrice } = dispatch('my-investing-app/stocks');
const interval = setInterval(() => {
stocks.forEach(stock => {
fetchStockPrice(stock.symbol)
.then(price => updateStockPrice(stock.symbol, price));
});
}, 60000);
return () => clearInterval(interval);
}, [stocks]);Cette approche permet de garder les données de votre composant synchronisées avec ton magasin tout en maintenant une séparation claire des préoccupations. Le paquet de données WordPress s’occupera de toutes les mises à jour d’état, ce qui donne de la cohérence à votre appli.
Rendu côté serveur
Enfin, vous pouvez configurer le rendu côté serveur pour vous assurer que les données du stock sont à jour lors du chargement de la page. Cela nécessite quelques connaissances en PHP:
function my_investing_app_render_stock_ticker($attributes, $content) {
// Fetch the latest stock data from your API
$stocks = fetch_latest_stock_data();
ob_start();
?>
<div class="stock-ticker">
<h2>Stock Ticker</h2>
<ul>
<?php foreach ($stocks as $stock) : ?>
<li><?php echo esc_html($stock['symbol']); ?>: $<?php echo esc_html($stock['price']); ?></li>
<?php endforeach; ?>
</ul>
</div>
<?php
return ob_get_clean();
}
register_block_type('my-investing-app/stock-ticker', array(
'render_callback' => 'my_investing_app_render_stock_ticker'
));Cette approche permet une intégration complète de votre magasin de données avec WordPress, en gérant tout, du rendu initial aux mises à jour en temps réel et aux interactions avec l’utilisateur.
Résumé
Le paquet de données WordPress est un moyen complexe mais robuste de gérer les états de l’application pour vos projets. Au-delà des concepts clés se trouve un trou de lapin de fonctions, d’opérateurs, d’arguments, et plus encore. N’oubliez pas, cependant, que toutes les données n’ont pas besoin d’être dans un magasin global – l’état des composants locaux a toujours sa place dans votre code.
Utilisez-vous régulièrement le paquet de données de WordPress ou avez-vous une autre méthode de gestion de l’état ? Partagez votre opinion avec nous dans les commentaires ci-dessous.
Steve Bonisteel est un rédacteur technique chez Kinsta qui a commencé sa carrière d'écrivain en tant que journaliste de presse écrite, chassant les ambulances et les camions de pompiers. Il couvre les technologies similaires à l'Internet depuis la fin des années 1990.
Laisser un commentaire