[{"data":1,"prerenderedAt":171},["ShallowReactive",2],{"$fNugnG-JHOBMFR3Lfx26FbUhIF_uLVnyQezok5IOOiuc":3,"post-tags-a-beginners-guide-to-global-state-management-in-wordpress-gutenberg":91},[4],{"id":5,"date":6,"date_gmt":6,"guid":7,"modified":9,"modified_gmt":9,"slug":10,"status":11,"type":12,"link":8,"title":13,"content":15,"excerpt":18,"author":20,"featured_media":21,"comment_status":22,"ping_status":22,"sticky":17,"template":23,"format":24,"meta":25,"categories":26,"tags":27,"class_list":32,"post_image_original":43,"devto_meta":44,"_links":50},43,"2024-09-16T17:18:55",{"rendered":8},"https:\u002F\u002Fportal.pluginizelab.com\u002Fa-beginners-guide-to-global-state-management-in-wordpress-gutenberg\u002F","2026-08-17T12:17:38","a-beginners-guide-to-global-state-management-in-wordpress-gutenberg","publish","post",{"rendered":14},"A Beginner’s Guide to Global State Management in WordPress Gutenberg",{"rendered":16,"protected":17},"\u003Cp>When building complex WordPress block editor (Gutenberg) applications, managing state efficiently becomes crucial. This is where \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode> comes into play. It allows you to manage and share global state across different blocks and components in your WordPress application.\u003C\u002Fp>\n\u003Cp>If you’re new to managing global state or using \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, don’t worry! This blog post will walk you through the basics of reducers, actions, and selectors, explaining how to use them to manage state in WordPress.\u003C\u002Fp>\n\u003Cp>\u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode> provides a way to store, update, and access data globally, allowing different components or blocks to share and interact with the same data.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"key-concepts-in-raw-wordpressdata-endraw-\" href=\"#key-concepts-in-raw-wordpressdata-endraw-\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Key Concepts in \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>To understand how to use \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, we need to understand three main concepts: reducers, actions, and selectors. These form the core of how state is managed and updated.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"actions\" href=\"#actions\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Actions:\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>An action is like an instruction or command that tells the reducer what to do. It’s simply an object that has two parts:\u003C\u002Fp>\n\u003Col>\n\u003Cli>A type that indicates what kind of change is happening (e.g., add, remove, update).\u003C\u002Fli>\n\u003Cli>A payload that contains the data needed for that change (e.g., which item to add).\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Here’s an example of how actions might look in our cart example:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">actions\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">addToCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Action type\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">item\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Payload: the item to add to the cart\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">},\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">removeFromCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Action type\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">itemId\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Payload: the ID of the item to remove\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>In short:\u003C\u002Fstrong> Actions tell the reducer what needs to change in the state.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"reducers\" href=\"#reducers\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Reducers:\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>A reducer is like a manager of your state. Whenever something changes in your application (e.g., a user adds a block or disables a feature), the reducer listens for that change and updates the state accordingly.\u003C\u002Fp>\n\u003Cp>What does a reducer do? It takes the current state and an action, then returns a new state based on the action.\u003Cbr \u002F>\nHere’s an example of a simple reducer that manages a shopping cart:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">reducer\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[]\u003C\u002Fspan> \u003Cspan class=\"p\">},\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"k\">switch \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">type\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Keep the existing state\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">]\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Add the new item to the cart\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">filter\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">id\u003C\u002Fspan> \u003Cspan class=\"o\">!==\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Remove the item from the cart\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">default\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Return the unchanged state for unknown actions\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>In short:\u003C\u002Fstrong> The reducer defines how the state changes when specific actions are dispatched.\u003C\u002Fp>\n\u003Ch3>\n  \u003Ca name=\"selectors\" href=\"#selectors\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Selectors:\u003Cbr \u002F>\n\u003C\u002Fh3>\n\u003Cp>A selector is a function that retrieves or selects specific data from the state. When your components need to access data (like displaying the items in the cart), they use a selector to fetch that data from the store.\u003C\u002Fp>\n\u003Cp>For example, a selector to get all the cart items might look like this:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">selectors\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan> \u003Cspan class=\"c1\">\u002F\u002F Return the cart items from the state\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>In a component, you would use this selector to access the cart data like this:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">cartItems\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">useSelect\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">select\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nf\">select\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">).\u003C\u002Fspan>\u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">());\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>In short:\u003C\u002Fstrong> A selector is a helper function that lets you access specific data from the state.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"step-by-step-guide-to-implement-global-state-in-gutenberg-with-raw-wordpressdata-endraw-\" href=\"#step-by-step-guide-to-implement-global-state-in-gutenberg-with-raw-wordpressdata-endraw-\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Step by Step Guide to Implement Global State in Gutenberg with \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>Now that we’ve covered the basics, let’s walk through how you can implement these concepts in a Gutenberg block or component. We’ll set up a simple store with \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, manage some state, and use actions and selectors to interact with that state.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Step 1: Define Your Initial State\u003C\u002Fstrong>\u003Cbr \u002F>\nFirst, we need to define the initial state of our store. This is the default data that our application starts with:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">DEFAULT_STATE\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[]\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 2: Create Actions\u003C\u002Fstrong>\u003Cbr \u002F>\nNext, we define the actions that we will use to update the state. In our case, we’ll define two actions: one to add an item to the cart and another to remove an item.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">actions\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">addToCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">item\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">},\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">removeFromCart\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n            \u003Cspan class=\"na\">type\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n            \u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\n        \u003Cspan class=\"p\">};\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 3: Create the Reducer\u003C\u002Fstrong>\u003Cbr \u002F>\nThe reducer listens for dispatched actions and updates the state accordingly. Here’s our reducer, which updates the cart when actions are dispatched:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">reducer\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nx\">DEFAULT_STATE\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"k\">switch \u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">type\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">ADD_TO_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">[...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">]\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"k\">case\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">REMOVE_FROM_CART\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n                \u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n                \u003Cspan class=\"na\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nf\">filter\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nx\">item\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">id\u003C\u002Fspan> \u003Cspan class=\"o\">!==\u003C\u002Fspan> \u003Cspan class=\"nx\">action\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">itemId\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan>\n            \u003Cspan class=\"p\">};\u003C\u002Fspan>\n        \u003Cspan class=\"nl\">default\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan>\n            \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 4: Create Selectors\u003C\u002Fstrong>\u003Cbr \u002F>\nSelectors help retrieve specific data from the state. For example, if we want to get all items in the cart, we would create a selector like this:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">selectors\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">return\u003C\u002Fspan> \u003Cspan class=\"nx\">state\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">cart\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">};\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 5: Create and Register the Store\u003C\u002Fstrong>\u003Cbr \u002F>\nFinally, we’ll create and register the store with the \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode> package. This will make the store globally accessible across your WordPress site.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">import\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">createReduxStore\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"nx\">register\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"k\">from\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">@wordpress\u002Fdata\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\n\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">store\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">createReduxStore\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-cart-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">reducer\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">actions\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">selectors\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n\u003Cspan class=\"p\">});\u003C\u002Fspan>\n\n\u003Cspan class=\"nf\">register\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"nx\">store\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>\u003Cstrong>Step 6: Using the Store in Components\u003C\u002Fstrong>\u003Cbr \u002F>\nOnce the store is registered, you can use it in your Gutenberg blocks or components. For example, to add an item to the cart:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">import\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">useDispatch\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"k\">from\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">@wordpress\u002Fdata\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\n\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">addToCart\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">useDispatch\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-cart-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n\u003Cspan class=\"nf\">addToCart\u003C\u002Fspan>\u003Cspan class=\"p\">({\u003C\u002Fspan> \u003Cspan class=\"na\">id\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">1\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"na\">name\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">Sample Item\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan> \u003Cspan class=\"p\">});\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>To fetch the items in the cart:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">import\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan> \u003Cspan class=\"nx\">useSelect\u003C\u002Fspan> \u003Cspan class=\"p\">}\u003C\u002Fspan> \u003Cspan class=\"k\">from\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">@wordpress\u002Fdata\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n\n\u003Cspan class=\"kd\">const\u003C\u002Fspan> \u003Cspan class=\"nx\">cartItems\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"nf\">useSelect\u003C\u002Fspan>\u003Cspan class=\"p\">((\u003C\u002Fspan>\u003Cspan class=\"nx\">select\u003C\u002Fspan>\u003Cspan class=\"p\">)\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"nf\">select\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">my-cart-store\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">).\u003C\u002Fspan>\u003Cspan class=\"nf\">getCartItems\u003C\u002Fspan>\u003Cspan class=\"p\">());\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"conclusion\" href=\"#conclusion\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Conclusion\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>By understanding the roles of reducers, actions, and selectors, you can easily manage global state in your WordPress Gutenberg projects using \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>. This structured approach allows you to manage data more efficiently, making your blocks and components more powerful and interactive.\u003C\u002Fp>\n\u003Cp>With \u003Ccode>@wordpress\u002Fdata\u003C\u002Fcode>, you have a reliable and scalable solution for handling state across your entire WordPress application. Give it a try in your next Gutenberg project!\u003C\u002Fp>\n",false,{"rendered":19,"protected":17},"\u003Cp>When building complex WordPress block editor (Gutenberg) applications, managing state efficiently…\u003C\u002Fp>\n",1,0,"open","","standard",{"footnotes":23},[20],[28,29,30,31],24,25,26,18,[33,12,34,35,36,37,38,39,40,41,42],"post-43","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-gutenberg","tag-javascript","tag-redux","tag-wordpress",null,{"edited_at":45,"published_at":46,"reactions":47,"comments":21,"reading_time":48,"body_markdown":49},"2024-09-16T17:28:07Z","2024-09-16T17:18:55Z",3,4,"When building complex WordPress block editor (Gutenberg) applications, managing state efficiently becomes crucial. This is where `@wordpress\u002Fdata` comes into play. It allows you to manage and share global state across different blocks and components in your WordPress application.\n\nIf you’re new to managing global state or using `@wordpress\u002Fdata`, don’t worry! This blog post will walk you through the basics of reducers, actions, and selectors, explaining how to use them to manage state in WordPress.\n\n`@wordpress\u002Fdata` provides a way to store, update, and access data globally, allowing different components or blocks to share and interact with the same data.\n\n## Key Concepts in `@wordpress\u002Fdata`\nTo understand how to use `@wordpress\u002Fdata`, we need to understand three main concepts: reducers, actions, and selectors. These form the core of how state is managed and updated.\n\n### Actions:\nAn action is like an instruction or command that tells the reducer what to do. It’s simply an object that has two parts:\n\n1. A type that indicates what kind of change is happening (e.g., add, remove, update).\n2. A payload that contains the data needed for that change (e.g., which item to add).\n\nHere’s an example of how actions might look in our cart example:\n\n```js\nconst actions = {\n    addToCart(item) {\n        return {\n            type: 'ADD_TO_CART', \u002F\u002F Action type\n            item \u002F\u002F Payload: the item to add to the cart\n        };\n    },\n    removeFromCart(itemId) {\n        return {\n            type: 'REMOVE_FROM_CART', \u002F\u002F Action type\n            itemId \u002F\u002F Payload: the ID of the item to remove\n        };\n    }\n};\n```\n**In short:** Actions tell the reducer what needs to change in the state.\n\n### Reducers:\nA reducer is like a manager of your state. Whenever something changes in your application (e.g., a user adds a block or disables a feature), the reducer listens for that change and updates the state accordingly.\n\nWhat does a reducer do? It takes the current state and an action, then returns a new state based on the action.\nHere’s an example of a simple reducer that manages a shopping cart:\n\n```js\nconst reducer = (state = { cart: [] }, action) => {\n    switch (action.type) {\n        case 'ADD_TO_CART':\n            return {\n                ...state, \u002F\u002F Keep the existing state\n                cart: [...state.cart, action.item] \u002F\u002F Add the new item to the cart\n            };\n        case 'REMOVE_FROM_CART':\n            return {\n                ...state,\n                cart: state.cart.filter((item) => item.id !== action.itemId) \u002F\u002F Remove the item from the cart\n            };\n        default:\n            return state; \u002F\u002F Return the unchanged state for unknown actions\n    }\n};\n```\n**In short:** The reducer defines how the state changes when specific actions are dispatched.\n\n### Selectors:\nA selector is a function that retrieves or selects specific data from the state. When your components need to access data (like displaying the items in the cart), they use a selector to fetch that data from the store.\n\nFor example, a selector to get all the cart items might look like this:\n\n```js\nconst selectors = {\n    getCartItems(state) {\n        return state.cart; \u002F\u002F Return the cart items from the state\n    }\n};\n```\nIn a component, you would use this selector to access the cart data like this:\n\n```js\nconst cartItems = useSelect((select) => select('my-store').getCartItems());\n```\n**In short:** A selector is a helper function that lets you access specific data from the state.\n\n## Step by Step Guide to Implement Global State in Gutenberg with `@wordpress\u002Fdata`\n\nNow that we’ve covered the basics, let’s walk through how you can implement these concepts in a Gutenberg block or component. We'll set up a simple store with `@wordpress\u002Fdata`, manage some state, and use actions and selectors to interact with that state.\n\n**Step 1: Define Your Initial State**\nFirst, we need to define the initial state of our store. This is the default data that our application starts with:\n\n```js\nconst DEFAULT_STATE = {\n    cart: []\n};\n```\n\n**Step 2: Create Actions**\nNext, we define the actions that we will use to update the state. In our case, we’ll define two actions: one to add an item to the cart and another to remove an item.\n\n```js\nconst actions = {\n    addToCart(item) {\n        return {\n            type: 'ADD_TO_CART',\n            item\n        };\n    },\n    removeFromCart(itemId) {\n        return {\n            type: 'REMOVE_FROM_CART',\n            itemId\n        };\n    }\n};\n```\n\n**Step 3: Create the Reducer**\nThe reducer listens for dispatched actions and updates the state accordingly. Here's our reducer, which updates the cart when actions are dispatched:\n\n```js\nconst reducer = (state = DEFAULT_STATE, action) => {\n    switch (action.type) {\n        case 'ADD_TO_CART':\n            return {\n                ...state,\n                cart: [...state.cart, action.item]\n            };\n        case 'REMOVE_FROM_CART':\n            return {\n                ...state,\n                cart: state.cart.filter((item) => item.id !== action.itemId)\n            };\n        default:\n            return state;\n    }\n};\n```\n\n**Step 4: Create Selectors**\nSelectors help retrieve specific data from the state. For example, if we want to get all items in the cart, we would create a selector like this:\n\n```js\nconst selectors = {\n    getCartItems(state) {\n        return state.cart;\n    }\n};\n```\n\n**Step 5: Create and Register the Store**\nFinally, we’ll create and register the store with the `@wordpress\u002Fdata` package. This will make the store globally accessible across your WordPress site.\n\n```js\nimport { createReduxStore, register } from '@wordpress\u002Fdata';\n\nconst store = createReduxStore('my-cart-store', {\n    reducer,\n    actions,\n    selectors,\n});\n\nregister(store);\n```\n\n**Step 6: Using the Store in Components**\nOnce the store is registered, you can use it in your Gutenberg blocks or components. For example, to add an item to the cart:\n\n```js\nimport { useDispatch } from '@wordpress\u002Fdata';\n\nconst { addToCart } = useDispatch('my-cart-store');\naddToCart({ id: 1, name: 'Sample Item' });\n```\n\nTo fetch the items in the cart:\n\n```js\nimport { useSelect } from '@wordpress\u002Fdata';\n\nconst cartItems = useSelect((select) => select('my-cart-store').getCartItems());\n```\n\n## Conclusion\nBy understanding the roles of reducers, actions, and selectors, you can easily manage global state in your WordPress Gutenberg projects using `@wordpress\u002Fdata`. This structured approach allows you to manage data more efficiently, making your blocks and components more powerful and interactive.\n\nWith `@wordpress\u002Fdata`, you have a reliable and scalable solution for handling state across your entire WordPress application. Give it a try in your next Gutenberg project!\n",{"self":51,"collection":57,"about":60,"author":63,"replies":67,"version-history":70,"predecessor-version":73,"wp:attachment":77,"wp:term":80,"curies":87},[52],{"href":53,"targetHints":54},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F43",{"allow":55},[56],"GET",[58],{"href":59},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts",[61],{"href":62},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftypes\u002Fpost",[64],{"embeddable":65,"href":66},true,"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fusers\u002F1",[68],{"embeddable":65,"href":69},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=43",[71],{"count":20,"href":72},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F43\u002Frevisions",[74],{"id":75,"href":76},105,"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F43\u002Frevisions\u002F105",[78],{"href":79},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=43",[81,84],{"taxonomy":82,"embeddable":65,"href":83},"category","https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=43",{"taxonomy":85,"embeddable":65,"href":86},"post_tag","https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=43",[88],{"name":89,"href":90,"templated":65},"wp","https:\u002F\u002Fapi.w.org\u002F{rel}",[92,113,132,151],{"id":28,"count":20,"description":23,"link":93,"name":94,"slug":94,"taxonomy":85,"meta":95,"_links":96},"https:\u002F\u002Fportal.pluginizelab.com\u002Ftag\u002Fgutenberg\u002F","gutenberg",[],{"self":97,"collection":102,"about":105,"wp:post_type":108,"curies":111},[98],{"href":99,"targetHints":100},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F24",{"allow":101},[56],[103],{"href":104},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags",[106],{"href":107},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftaxonomies\u002Fpost_tag",[109],{"href":110},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=24",[112],{"name":89,"href":90,"templated":65},{"id":29,"count":47,"description":23,"link":114,"name":115,"slug":115,"taxonomy":85,"meta":116,"_links":117},"https:\u002F\u002Fportal.pluginizelab.com\u002Ftag\u002Fjavascript\u002F","javascript",[],{"self":118,"collection":123,"about":125,"wp:post_type":127,"curies":130},[119],{"href":120,"targetHints":121},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F25",{"allow":122},[56],[124],{"href":104},[126],{"href":107},[128],{"href":129},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=25",[131],{"name":89,"href":90,"templated":65},{"id":30,"count":20,"description":23,"link":133,"name":134,"slug":134,"taxonomy":85,"meta":135,"_links":136},"https:\u002F\u002Fportal.pluginizelab.com\u002Ftag\u002Fredux\u002F","redux",[],{"self":137,"collection":142,"about":144,"wp:post_type":146,"curies":149},[138],{"href":139,"targetHints":140},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F26",{"allow":141},[56],[143],{"href":104},[145],{"href":107},[147],{"href":148},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=26",[150],{"name":89,"href":90,"templated":65},{"id":31,"count":152,"description":23,"link":153,"name":154,"slug":154,"taxonomy":85,"meta":155,"_links":156},7,"https:\u002F\u002Fportal.pluginizelab.com\u002Ftag\u002Fwordpress\u002F","wordpress",[],{"self":157,"collection":162,"about":164,"wp:post_type":166,"curies":169},[158],{"href":159,"targetHints":160},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F18",{"allow":161},[56],[163],{"href":104},[165],{"href":107},[167],{"href":168},"https:\u002F\u002Fportal.pluginizelab.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=18",[170],{"name":89,"href":90,"templated":65},1791053386825]