[{"data":1,"prerenderedAt":166},["ShallowReactive",2],{"$fnNNhho376wdj9sP6Gx7NMGjdHthRlphxWvhqOmPqb_4":3,"post-tags-a-beginners-guide-to-global-state-management-in-wordpress-gutenberg":86},[4],{"id":5,"date":6,"date_gmt":6,"guid":7,"modified":6,"modified_gmt":6,"slug":9,"status":10,"type":11,"link":8,"title":12,"content":14,"excerpt":17,"author":19,"featured_media":20,"comment_status":21,"ping_status":21,"sticky":16,"template":22,"format":23,"meta":24,"categories":25,"tags":26,"class_list":31,"post_image_original":42,"devto_meta":43,"_links":49},43,"2024-09-16T17:18:55",{"rendered":8},"https:\u002F\u002Flab.aiarnob.com\u002Fa-beginners-guide-to-global-state-management-in-wordpress-gutenberg\u002F","a-beginners-guide-to-global-state-management-in-wordpress-gutenberg","publish","post",{"rendered":13},"A Beginner’s Guide to Global State Management in WordPress Gutenberg",{"rendered":15,"protected":16},"\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":18,"protected":16},"\u003Cp>When building complex WordPress block editor (Gutenberg) applications, managing state efficiently…\u003C\u002Fp>\n",1,0,"open","","standard",{"footnotes":22},[19],[27,28,29,30],24,25,26,18,[32,11,33,34,35,36,37,38,39,40,41],"post-43","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-gutenberg","tag-javascript","tag-redux","tag-wordpress",null,{"edited_at":44,"published_at":45,"reactions":46,"comments":20,"reading_time":47,"body_markdown":48},"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":50,"collection":56,"about":59,"author":62,"replies":66,"version-history":69,"wp:attachment":72,"wp:term":75,"curies":82},[51],{"href":52,"targetHints":53},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F43",{"allow":54},[55],"GET",[57],{"href":58},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts",[60],{"href":61},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftypes\u002Fpost",[63],{"embeddable":64,"href":65},true,"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fusers\u002F1",[67],{"embeddable":64,"href":68},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=43",[70],{"count":20,"href":71},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F43\u002Frevisions",[73],{"href":74},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=43",[76,79],{"taxonomy":77,"embeddable":64,"href":78},"category","https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=43",{"taxonomy":80,"embeddable":64,"href":81},"post_tag","https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=43",[83],{"name":84,"href":85,"templated":64},"wp","https:\u002F\u002Fapi.w.org\u002F{rel}",[87,108,127,146],{"id":27,"count":19,"description":22,"link":88,"name":89,"slug":89,"taxonomy":80,"meta":90,"_links":91},"https:\u002F\u002Flab.aiarnob.com\u002Ftag\u002Fgutenberg\u002F","gutenberg",[],{"self":92,"collection":97,"about":100,"wp:post_type":103,"curies":106},[93],{"href":94,"targetHints":95},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F24",{"allow":96},[55],[98],{"href":99},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags",[101],{"href":102},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftaxonomies\u002Fpost_tag",[104],{"href":105},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=24",[107],{"name":84,"href":85,"templated":64},{"id":28,"count":46,"description":22,"link":109,"name":110,"slug":110,"taxonomy":80,"meta":111,"_links":112},"https:\u002F\u002Flab.aiarnob.com\u002Ftag\u002Fjavascript\u002F","javascript",[],{"self":113,"collection":118,"about":120,"wp:post_type":122,"curies":125},[114],{"href":115,"targetHints":116},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F25",{"allow":117},[55],[119],{"href":99},[121],{"href":102},[123],{"href":124},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=25",[126],{"name":84,"href":85,"templated":64},{"id":29,"count":19,"description":22,"link":128,"name":129,"slug":129,"taxonomy":80,"meta":130,"_links":131},"https:\u002F\u002Flab.aiarnob.com\u002Ftag\u002Fredux\u002F","redux",[],{"self":132,"collection":137,"about":139,"wp:post_type":141,"curies":144},[133],{"href":134,"targetHints":135},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F26",{"allow":136},[55],[138],{"href":99},[140],{"href":102},[142],{"href":143},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=26",[145],{"name":84,"href":85,"templated":64},{"id":30,"count":147,"description":22,"link":148,"name":149,"slug":149,"taxonomy":80,"meta":150,"_links":151},6,"https:\u002F\u002Flab.aiarnob.com\u002Ftag\u002Fwordpress\u002F","wordpress",[],{"self":152,"collection":157,"about":159,"wp:post_type":161,"curies":164},[153],{"href":154,"targetHints":155},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F18",{"allow":156},[55],[158],{"href":99},[160],{"href":102},[162],{"href":163},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=18",[165],{"name":84,"href":85,"templated":64},1781010863624]