Kennismaking met het WordPress data pakket<\/h2>\n
Het WordPress data pakket<\/a> – officieel Het WordPress data pakket is ge\u00efnspireerd op Redux<\/a>, een populaire state management bibliotheek in het React ecosysteem<\/a>.<\/p>\n De datamodule werkt binnen de WordPress omgeving en biedt het integraties met WordPress specifieke functionaliteit en API’s. Als je bouwt voor de WordPress Block Editor<\/a> – of het is iets dat je moet ondersteunen – zal het pakket cruciaal zijn bij het beheren van de state ervan. Door dezelfde tools en patterns te gebruiken in je eigen plugins en thema’s, kun je een meer consistente en vertrouwde ontwikkelervaring cre\u00ebren.<\/p>\n Hoewel het WordPress data pakket ge\u00efnspireerd is op Redux, is het geen directe port. Er zijn veel aanpassingen die passen bij het WordPress ecosysteem, met enkele belangrijke verschillen tussen de twee oplossingen:<\/p>\n Het WordPress data pakket heeft ook enkele vergelijkingen met de REST API<\/a>. Hoewel ze allebei te maken hebben met gegevensbeheer, dienen ze verschillende doelen:<\/p>\n In veel gevallen zul je beide samen gebruiken: de REST API om gegevens op te halen en bij te werken op de server en het WordPress data pakket om die gegevens binnen je applicatie te beheren.<\/p>\n Het WordPress data pakket biedt een intu\u00eftieve manier om gegevens te beheren. Zie dit als gegevens binnen een store. Het vertegenwoordigt de huidige state van je applicatie en kan zowel UI-state (zoals of er een open modal is) als gegevensstate (zoals een lijst met berichten) bevatten.<\/p>\n In deze context is een store de centrale hub van het WordPress data pakket. Het bewaart de hele state van de site en biedt de methoden om die state te openen en bij te werken. In WordPress kun je meerdere stores hebben. Elke store is verantwoordelijk voor een specifiek deel van je site.<\/p>\n Om die stores te beheren, heb je een register nodig. Dit centrale object biedt methoden om nieuwe stores te registreren en toegang te krijgen tot je bestaande stores. Een register bevat stores en die stores bevatten de state van je applicatie.<\/p>\n Er zijn een paar manieren om met de state te werken:<\/p>\n Je moet deze fundamentele concepten begrijpen, omdat ze allemaal samenwerken om een robuust statesbeheersysteem te maken met stores in het hart.<\/p>\n Stores zijn de containers voor de state van je applicatie en bieden de methoden om ermee te communiceren. Het WordPress data pakket bundelt een paar andere pakketten en elk van deze registreert stores voor de Block directory, Block Editor<\/a>, core, het bewerken van berichten en meer.<\/p>\n Elke store heeft een unieke namespace, zoals Dit centrale object heeft een paar verantwoordelijkheden:<\/p>\n Hoewel je niet vaak directe interactie hebt met het register, moet je wel de rol ervan begrijpen in hoe het data pakket het beheer van de state in WordPress orkestreert.<\/p>\n Als je ES2015+<\/a> JavaScript gebruikt en je werkt met een WordPress plugin of thema, dan kun je deze als dependency opnemen:<\/p>\n In je code importeer je de benodigde functies uit het pakket bovenaan het bestand:<\/p>\n Interactie met bestaande WordPress stores vereist dat je enkele van de functies gebruikt die je importeert. Toegang tot stategegevens met Hetzelfde geldt voor het dispatchen van acties:<\/p>\n Subscriptions op statesveranderingen gebruikt een iets ander format, maar het concept is hetzelfde:<\/p>\n Je werkt echter niet altijd met de standaard stores. Vaak werk je met bestaande extra stores of registreer je je eigen stores.<\/p>\n Het defini\u00ebren van de configuratie van je store en het registreren met het WordPress data pakket begint met het importeren van de Deze neemt een enkel argument – je store descriptor. Vervolgens moet je een default state voor de store defini\u00ebren om de standaardwaarden in te stellen:<\/p>\n Maak vervolgens een Om de storeconfiguratie te maken, definieer je deze met het Het minimum dat dit object nodig heeft is een reducer om de vorm van de state te defini\u00ebren en hoe deze verandert als reactie op andere acties. Tenslotte registreer je de store door de store descriptor te callen die je hebt gedefinieerd met Je kunt nu communiceren met je aangepaste store zoals je dat ook met andere zou doen:<\/p>\n De sleutel in het gebruik van het WordPress data pakket is hoe je de verschillende eigenschappen en objecten gebruikt die tot je beschikking staan.<\/p>\n Een groot deel van het gebruik van het WordPress data pakket gebeurt “achterstevoren” – het defini\u00ebren van low-level data store properties v\u00f3\u00f3r de store zelf. Het Deze andere properties moeten ook worden ingesteld en geconfigureerd.<\/p>\n Actions zijn de belangrijkste manier om stateveranderingen in je store te triggeren. Het zijn eenvoudige JavaScript objecten die beschrijven wat er moet<\/em> gebeuren. Daarom kan het een goed idee zijn om deze eerst te maken, omdat je dan kunt bepalen welke states je wilt ophalen.<\/p>\n Action creators<\/a> nemen optionele argumenten aan en geven een object terug dat je kunt doorgeven aan de reducer die je hebt gedefinieerd:<\/p>\n Als je een store descriptor doorgeeft, kun je action creators dispatchen en de statewaarde bijwerken:<\/p>\n Beschouw actie-objecten als instructies voor de reducer over hoe de state te veranderen. Op zijn minst zul je waarschijnlijk create, update, read en delete (CRUD) acties willen defini\u00ebren. Het kan ook zijn dat je een apart JavaScript bestand hebt voor actietypen en voor al die typen een object maakt, vooral als je ze als constanten definieert.<\/p>\n Het is de moeite waard om het hier over de reducer te hebben, vanwege zijn centrale rol naast acties. Het is zijn taak om te specificeren hoe de state moet veranderen als reactie op de instructies die hij krijgt van een actie. Als je het de instructies van de actie en de huidige staat doorgeeft, kan het een nieuw statesobject teruggeven en dit doorgeven aan de chain:<\/p>\n Let op dat een reducer een pure functie<\/a> moet zijn, en het zou de state die het accepteert niet moeten muteren (in plaats daarvan zou het het moeten teruggeven met updates). Reducers en acties hebben in veel opzichten een symbiotische relatie, dus begrijpen hoe ze samenwerken is belangrijk.<\/p>\n Om toegang te krijgen tot de huidige staat van een geregistreerde store, heb je selectors nodig. Dit is de belangrijkste manier om de staat van je store “bloot te geven” en ze helpen om je componenten los te koppelen van de interne structuur van de store:<\/p>\n Je kunt deze selectors callen met de functie Een selector stuurt die gegevens echter nergens naartoe: hij onthult ze gewoon en biedt toegang.<\/p>\n Selectors kunnen zoveel argumenten ontvangen als je nodig hebt om toegang te krijgen tot de state. De waarde die wordt geretourneerd is het resultaat van wat die argumenten bereiken binnen de selector die je definieert. Net als bij acties kun je ervoor kiezen om een apart bestand te maken voor al je selectors, omdat het er heel veel kunnen zijn.<\/p>\n Om de uitvoeringsstroom van de functionaliteit van je site te sturen – of de logica erin uit te voeren – gebruik je controls<\/a>. Deze defini\u00ebren het gedrag van uitvoeringsstromen voor je acties. Beschouw ze als de assistenten in het WordPress data pakket, want ze werken als tussenpersonen om de state te verzamelen die moet worden doorgegeven aan resolvers.<\/p>\n Controls handelen ook neveneffecten in je store af, zoals API calls of interacties met browser-API’s. Ze laten je reducers schoon houden terwijl je toch complexe async operaties kunt afhandelen:<\/p>\n Deze cyclus van gegevens ophalen en terugsturen is cruciaal voor het hele proces. Maar zonder een call van een actie kun je die gegevens niet gebruiken.<\/p>\n Selectors geven de state van een store weer, maar sturen die gegevens niet expliciet ergens naartoe. Resolvers gebruiken selectors (en controls) om de gegevens op te halen. Net als besturingselementen kunnen ze ook asynchroon gegevens ophalen.<\/p>\n De resolver zorgt ervoor dat de gegevens waar je om vraagt beschikbaar zijn in de store voordat hij een selector uitvoert. Deze nauwe verbinding tussen de resolver en de selector betekent dat ze namen moeten matchen. Dit is zodat het WordPress data pakket kan begrijpen welke resolver moet worden aangeroepen op basis van de gegevens die je opvraagt.<\/p>\n Bovendien zal de resolver altijd dezelfde argumenten ontvangen die je doorgeeft aan een selector functie en zal hij ook actieobjecten retourneren, opleveren of verzenden.<\/p>\n Je moet een goede foutafhandeling<\/a> implementeren als je werkt met het WordPress data pakket. Als je ervoor kiest om asynchrone operaties uit te voeren, met full stack implementaties<\/a> werkt of API calls doet, is het nog belangrijker.<\/p>\n Als je bijvoorbeeld acties uitvoert die asynchrone bewerkingen met zich meebrengen, kan een try-catch blok een goede optie zijn:<\/p>\n Voor reducers kun je foutacties afhandelen en de state bijwerken:<\/p>\n Als je selectors gebruikt, kun je foutcontrole inbouwen om mogelijke problemen af te handelen en dan controleren op fouten in je componenten voordat je de gegevens gebruikt…:<\/p>\n De functies Het is een goede gewoonte om ervoor te zorgen dat je je error state centraliseert tijdens de eerste configuratie en om foutgrenzen op componentniveau te houden. Het toepassen van foutafhandeling voor loading states zal ook helpen om je code duidelijk en consistent te houden.<\/p>\n Er is veel dat het WordPress data pakket kan doen om je te helpen bij het beheren van states. Dit alles samenvoegen is ook een praktische overweging. Laten we eens kijken naar een aandelenticker die financi\u00eble gegevens in real-time weergeeft en bijwerkt.<\/p>\n De eerste taak is het maken van een opslagplaats voor je gegevens:<\/p>\n Dit proces stelt een standaardstate in die error- en loading state bevat, samen met je acties, reducers en selectors. Zodra je deze hebt gedefinieerd, kun je de store registreren.<\/p>\n Nu de store er is, kun je een React component maken<\/a> om de informatie in de store weer te geven:<\/p>\n Dit component gebruikt de hooks @wordpress\/data<\/code> – is een JavaScript (ES2015 en hoger) state management bibliotheek die een voorspelbare en gecentraliseerde manier biedt om de state van applicaties te beheren. De juiste implementatie kan het gemakkelijker maken om complexe gebruikersinterfaces te bouwen en de gegevensstroom in je applicatie af te handelen.<\/p>\n![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/the-redux-website-home-page.png\")
De relatie tussen het pakket en Redux<\/h3>\n
\n
\n
Belangrijkste concepten en terminologie voor het WordPress data pakket<\/h2>\n
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/11\/post-list.png\")
\n
type<\/code>, die de actie beschrijft. Het kan ook aanvullende gegevens bevatten.<\/li>\nStores: de centrale hub van het WordPress data pakket<\/h2>\n
core<\/code>, core\/editor<\/code>, en core\/notices<\/code>. Externe plugins zullen ook stores registreren, dus je moet unieke namespaces kiezen om conflicten te voorkomen. Stores die je registreert zullen in de meeste gevallen in het standaard register staan.<\/p>\n\n
Basis interactie met WordPress data stores<\/h3>\n
npm install @wordpress\/data --save<\/code><\/pre>\nimport { select, dispatch, subscribe } from '@wordpress\/data';<\/code><\/pre>\nselect<\/code> bijvoorbeeld:<\/p>\nconst posts = select('core').getPosts();<\/code><\/pre>\ndispatch('core').savePost(postData);<\/code><\/pre>\nsubscribe(() => {\n const newPosts = select('core').getPosts();\n \/\/ Update your UI based on the new posts\n});<\/code><\/pre>\nHoe registreer je een WordPress data store<\/h2>\n
register<\/code> functie:<\/p>\n\u2026\nimport { createReduxStore, register } from '@wordpress\/data';\n\u2026<\/code><\/pre>\n\u2026\nconst DEFAULT_STATE = {\n todos: [],\n};\n\u2026<\/code><\/pre>\nactions<\/code> object, definieer een reducer<\/code> functie om stateupdates af te handelen en maak een selectors<\/code> object met functies om de stategegevens te benaderen:<\/p>\nconst actions = {\n addTodo: (text) => ({\n type: 'ADD_TODO',\n text,\n }),\n};\n\nconst reducer = (state = DEFAULT_STATE, action) => {\n switch (action.type) {\n case 'ADD_TODO':\n return {\n ...state,\n todos: [...state.todos, { text: action.text, completed: false }],\n };\n default:\n return state;\n }\n};\n\nconst selectors = {\n getTodos: (state) => state.todos,\n};<\/code><\/pre>\ncreateReduxStore<\/code> object. Dit initialiseert de acties, selectors, besturing en andere properties voor je store:<\/p>\nconst store = createReduxStore('my-plugin\/todos', {\n reducer,\n actions,\n selectors,\n});<\/code><\/pre>\ncreateReduxStore<\/code>:<\/p>\nregister(store);<\/code><\/pre>\nimport { select, dispatch } from '@wordpress\/data';\n\/\/ Add a new todo\ndispatch('my-plugin\/todos').addTodo('Learn WordPress data pakket');\n\/\/ Get all todos\nconst todos = select('my-plugin\/todos').getTodos();<\/code><\/pre>\nDe vijf properties van de WordPress data store<\/h2>\n
createReduxStore<\/code> object is een perfect voorbeeld, omdat het alle definities samenbrengt<\/a> die je maakt om de descriptor te maken die je gebruikt om een store te registreren:<\/p>\nimport { createReduxStore } from '@wordpress\/data';\n const store = createReduxStore( 'demo', {\n reducer: ( state = 'OK' ) => state,\n selectors: {\n getValue: ( state ) => state,\n },\n } );<\/code><\/pre>\n1. Actions<\/h3>\n
const actions = {\n addTodo: (text) => ({\n type: 'ADD_TODO',\n text,\n }),\n toggleTodo: (index) => ({\n type: 'TOGGLE_TODO',\n index,\n }),\n};<\/code><\/pre>\nconst actions = {\n updateStockPrice: (symbol, newPrice) => {\n return {\n type: 'UPDATE_STOCK_PRICE',\n symbol,\n newPrice\n };\n},<\/code><\/pre>\ndispatch('my-plugin\/todos').updateStockPrice('\u00a5', '150.37');<\/code><\/pre>\n2. Reducer<\/h3>\n
const reducer = (state = DEFAULT_STATE, action) => {\n switch (action.type) {\n case 'ADD_TODO':\n return {\n ...state,\n todos: [...state.todos, { text: action.text, completed: false }],\n };\n case 'TOGGLE_TODO':\n return {\n ...state,\n todos: state.todos.map((todo, index) =>\n index === action.index ? { ...todo, completed: !todo.completed } : todo\n ),\n };\n default:\n return state;\n }\n};<\/code><\/pre>\n3. Selectors<\/h3>\n
const selectors = {\n getTodos: (state) => state.todos,\n getTodoCount: (state) => state.todos.length,\n};<\/code><\/pre>\nselect<\/code>:<\/p>\nconst todoCount = select('my-plugin\/todos').getTodoCount();<\/code><\/pre>\n4. Controls<\/h3>\n
const controls = {\n FETCH_TODOS: async () => {\n const response = await fetch('\/api\/todos');\n return response.json();\n },\n};\n\nconst actions = {\n fetchTodos: () => ({ type: 'FETCH_TODOS' }),\n};<\/code><\/pre>\n5. Resolvers<\/h3>\n
const resolvers = {\n getTodos: async () => {\n const todos = await controls.FETCH_TODOS();\n return actions.receiveTodos(todos);\n },\n};<\/code><\/pre>\nFoutafhandeling bij het gebruik van het WordPress data pakket<\/h2>\n
const StockUpdater = () => {\n \/\/ Get the dispatch function\n const { updateStock, setError, clearError } = useDispatch('my-app\/stocks');\n const handleUpdateStock = async (stockId, newData) => {\n try {\n \/\/ Clear any existing errors\n clearError();\n \/\/ Attempt to update the stock\n await updateStock(stockId, newData);\n } catch (error) {\n \/\/ Dispatch an error action if something goes wrong\n setError(error.message);\n }\n};\n\n return (\n <button onClick={() => handleUpdateStock('AAPL', { price: 150 })}>\n Update Stock\n <\/button>\n );\n};<\/code><\/pre>\nconst reducer = (state = DEFAULT_STATE, action) => {\n switch (action.type) {\n \/\/ ... other cases\n case 'FETCH_TODOS_ERROR':\n return {\n ...state,\n error: action.error,\n isLoading: false,\n };\n default:\n return state;\n }\n};<\/code><\/pre>\nconst MyComponent = () => {\n \/\/ Get multiple pieces of state including error information\n const { data, isLoading, error } = useSelect((select) => ({\n data: select('my-app\/stocks').getStockData(),\n isLoading: select('my-app\/stocks').isLoading(),\n error: select('my-app\/stocks').getError()\n }));\n\n \/\/ Handle different states\n if (isLoading) {\n return <div>Loading...<\/div>;\n }\n\n if (error) {\n return (\n <div className=\"error-message\">\n <p>Error loading stocks: {error.message}<\/p>\n <button onClick={retry}>Try Again<\/button>\n <\/div>\n );\n }\n return (\n <div>\n {\/* Your normal component render *\/}\n <\/div>\n );\n};<\/code><\/pre>\nuseSelect<\/code> en useDispatch<\/code> geven je veel mogelijkheden om fouten af te handelen binnen het WordPress data pakket. Met beide functies kun je aangepaste foutmeldingen als argumenten doorgeven.<\/p>\nHoe je je WordPress data store kunt integreren met je site<\/h2>\n
import { createReduxStore, register } from '@wordpress\/data';\n\nconst DEFAULT_STATE = {\n stocks: [],\n isLoading: false,\n error: null,\n};\n\nconst actions = {\n fetchStocks: () => async ({ dispatch }) => {\n dispatch({ type: 'FETCH_STOCKS_START' });\n try {\n const response = await fetch('\/api\/stocks');\n const stocks = await response.json();\n dispatch({ type: 'RECEIVE_STOCKS', stocks });\n } catch (error) {\n dispatch({ type: 'FETCH_STOCKS_ERROR', error: error.message });\n }\n },\n};\n\nconst reducer = (state = DEFAULT_STATE, action) => {\n switch (action.type) {\n case 'FETCH_STOCKS_START':\n return { ...state, isLoading: true, error: null };\n case 'RECEIVE_STOCKS':\n return { ...state, stocks: action.stocks, isLoading: false };\n case 'FETCH_STOCKS_ERROR':\n return { ...state, error: action.error, isLoading: false };\n default:\n return state;\n }\n};\n\nconst selectors = {\n getStocks: (state) => state.stocks,\n getStocksError: (state) => state.error,\n isStocksLoading: (state) => state.isLoading,\n};\n\nconst store = createReduxStore('my-investing-app\/stocks', {\n reducer,\n actions,\n selectors,\n});\n\nregister(store);<\/code><\/pre>\nDe gegevens van de store weergeven<\/h3>\n
import { useSelect, useDispatch } from '@wordpress\/data';\nimport { useEffect } from '@wordpress\/element';\n\nconst StockTicker = () => {\n const stocks = useSelect((select) => select('my-investing-app\/stocks').getStocks());\n const error = useSelect((select) => select('my-investing-app\/stocks').getStocksError());\n const isLoading = useSelect((select) => select('my-investing-app\/stocks').isStocksLoading());\n\n const { fetchStocks } = useDispatch('my-investing-app\/stocks');\n\n useEffect(() => {\n fetchStocks();\n }, []);\n\n if (isLoading) {\n return <p>Loading stock data...<\/p>;\n }\n\n if (error) {\n return <p>Error: {error}<\/p>;\n }\n\n return (\n <div className=\"stock-ticker\">\n <h2>Stock Ticker<\/h2>\n <ul>\n {stocks.map((stock) => (\n <li key={stock.symbol}>\n {stock.symbol}: ${stock.price}\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n};<\/code><\/pre>\nuseSelect<\/code> en useDispatch<\/code> (samen met andere) voor het afhandelen van gegevenstoegang, het dispatchen van acties en het levenscyclusbeheer van componenten. Het stelt ook aangepaste error- en loading state berichten in, samen met wat code om de ticker daadwerkelijk weer te geven. Nu dit klaar is, moet je het component registreren bij WordPress.<\/p>\nDe component registreren bij WordPress<\/h3>\n