[{"data":1,"prerenderedAt":107},["ShallowReactive",2],{"blog-tag-redux":3,"blog-tag-posts-redux":32},{"id":4,"count":5,"description":6,"link":7,"name":8,"slug":8,"taxonomy":9,"meta":10,"_links":11},26,1,"","https:\u002F\u002Flab.aiarnob.com\u002Ftag\u002Fredux\u002F","redux","post_tag",[],{"self":12,"collection":18,"about":21,"wp:post_type":24,"curies":27},[13],{"href":14,"targetHints":15},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F26",{"allow":16},[17],"GET",[19],{"href":20},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags",[22],{"href":23},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftaxonomies\u002Fpost_tag",[25],{"href":26},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=26",[28],{"name":29,"href":30,"templated":31},"wp","https:\u002F\u002Fapi.w.org\u002F{rel}",true,[33],{"id":34,"date":35,"date_gmt":35,"guid":36,"modified":35,"modified_gmt":35,"slug":38,"status":39,"type":40,"link":37,"title":41,"content":43,"excerpt":46,"author":5,"featured_media":48,"comment_status":49,"ping_status":49,"sticky":45,"template":6,"format":50,"meta":51,"categories":52,"tags":53,"class_list":57,"post_image_original":68,"devto_meta":69,"_links":75},43,"2024-09-16T17:18:55",{"rendered":37},"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":42},"A Beginner’s Guide to Global State Management in WordPress Gutenberg",{"rendered":44,"protected":45},"\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":47,"protected":45},"\u003Cp>When building complex WordPress block editor (Gutenberg) applications, managing state efficiently…\u003C\u002Fp>\n",0,"open","standard",{"footnotes":6},[5],[54,55,4,56],24,25,18,[58,40,59,60,61,62,63,64,65,66,67],"post-43","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-gutenberg","tag-javascript","tag-redux","tag-wordpress",null,{"edited_at":70,"published_at":71,"reactions":72,"comments":48,"reading_time":73,"body_markdown":74},"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":76,"collection":81,"about":84,"author":87,"replies":90,"version-history":93,"wp:attachment":96,"wp:term":99,"curies":105},[77],{"href":78,"targetHints":79},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F43",{"allow":80},[17],[82],{"href":83},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts",[85],{"href":86},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftypes\u002Fpost",[88],{"embeddable":31,"href":89},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fusers\u002F1",[91],{"embeddable":31,"href":92},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=43",[94],{"count":48,"href":95},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F43\u002Frevisions",[97],{"href":98},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=43",[100,103],{"taxonomy":101,"embeddable":31,"href":102},"category","https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=43",{"taxonomy":9,"embeddable":31,"href":104},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=43",[106],{"name":29,"href":30,"templated":31},1781010867861]