{"id":23399723,"url":"https://github.com/ch0ripain/react-context-and-reducer","last_synced_at":"2026-05-05T00:37:28.029Z","repository":{"id":265160122,"uuid":"891173935","full_name":"ch0ripain/react-context-and-reducer","owner":"ch0ripain","description":"🔷 Simple React - Context \u0026 Reducer - Project 🔷","archived":false,"fork":false,"pushed_at":"2024-11-28T01:11:31.000Z","size":1159,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T19:53:11.424Z","etag":null,"topics":["frontend","react","react-context","react-context-api","react-reducer","react-reducer-provider","reactjs","web-development"],"latest_commit_sha":null,"homepage":"https://react-context-and-reducer.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ch0ripain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-19T21:25:16.000Z","updated_at":"2024-11-28T01:11:35.000Z","dependencies_parsed_at":"2024-11-28T02:20:00.481Z","dependency_job_id":"2ef2b0a9-b0a4-4dce-b227-f6a18aecc7d8","html_url":"https://github.com/ch0ripain/react-context-and-reducer","commit_stats":null,"previous_names":["ch0ripain/react-context-and-reducer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ch0ripain/react-context-and-reducer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-context-and-reducer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-context-and-reducer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-context-and-reducer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-context-and-reducer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ch0ripain","download_url":"https://codeload.github.com/ch0ripain/react-context-and-reducer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ch0ripain%2Freact-context-and-reducer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32631058,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"ssl_error","status_checked_at":"2026-05-04T10:08:02.005Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","react","react-context","react-context-api","react-reducer","react-reducer-provider","reactjs","web-development"],"created_at":"2024-12-22T10:16:16.736Z","updated_at":"2026-05-05T00:37:27.998Z","avatar_url":"https://github.com/ch0ripain.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e 🚀 Quick Introduction to React Context \u0026 Reducer 🚀 \u003c/h1\u003e\n\n## 🌐 Context 🌐\nIn React, a Context is a common way to share state globally across your application. \nTo get started, you first need to create the context. This can be done using a function provided by React ➡️ \u003ccode\u003ecreateContext\u003c/code\u003e \n```javascript\nimport { createContext } from \"react\";\nexport const CartContext = createContext({\n  items: [],\n  addItemToCart: () =\u003e {},\n  updateCartItemQuantity: () =\u003e {},\n});\n```\nAs shown above, we need to import \u003ccode\u003ecreateContext\u003c/code\u003e to make it available for use.\nThe createContext function can accept any JavaScript expression, such as \u003ccode\u003e[], {}, 5, or 'context'\u003c/code\u003e\n\nIn this example, we define an object with some properties initialized to undefined values. This is a common best practice as it allows us to clearly define the properties of our context while enabling code autocompletion in our editor.\n\nA standard approach to make the context usable is to wrap it in a component using the \u003ccode\u003eContext.Provider\u003c/code\u003e property.\n\n```javascript\nexport default function CartContextProvider({ children }) {\n  const contextValue = {\n    items: shoppingCartState.items,\n    addItemToCart: handleAddItemToCart,\n    updateCartItemQuantity: handleUpdateCartItemQuantity,\n  };\n return (\n    \u003cCartContext.Provider value={contextValue}\u003e{children}\u003c/CartContext.Provider\u003e\n  );\n}\n```\nFinally, we need to wrap our main component with the context provider. This ensures that the main component and all its child components will have access to the context.\n```javascript\nimport CartContextProvider from \"./store/shopping-cart-context.jsx\";\n\nfunction App() {\n  return (\n    \u003cCartContextProvider\u003e\n      \u003cHeader /\u003e\n      \u003cShop\u003e\n        {DUMMY_PRODUCTS.map((product) =\u003e (\n          \u003cli key={product.id}\u003e\n            \u003cProduct {...product} /\u003e\n          \u003c/li\u003e\n        ))}\n      \u003c/Shop\u003e\n    \u003c/CartContextProvider\u003e\n  );\n}\n```\n\n## 🌀 Reducer 🌀\n```javascript\nconst [shoppingCartState, shoppingCartDispatch] = useReducer(\n    shoppingCartReducer,\n    {\n      items: [],\n    }\n  );\n  //...\n  \u003cp\u003e{items.length == 0 \u0026\u0026 No items :(}\u003c/p\u003e\n  //...\n```\nAs shown above, the \u003ccode\u003eshoppingCartState\u003c/code\u003e should be treated as a read-only value.\n\nOn the other hand, \u003ccode\u003eshoppingCartDispatch\u003c/code\u003e is the dispatcher function that we use to pass the updated state and the type of change we want to perform.\n\nThe \u003ccode\u003euseReducer()\u003c/code\u003e hook takes two arguments:\n\n- A function that contains all the logic for updating the state.\n- The initial state value.\n\nIn essence, useReducer is a hook similar to useState, but all state updates are managed in a separate function, providing a more structured way to handle complex state logic.\n```javascript\nfunction shoppingCartReducer(state, action) {\n  if (action.type === \"ADD_ITEM\") {\n    const updatedItems = [...state.items];\n\n    const existingCartItemIndex = updatedItems.findIndex(\n      (cartItem) =\u003e cartItem.id === action.payload.id\n    );\n    //...\n  }\n}\n```\n\u003ccode\u003eshoppingCartReducer\u003c/code\u003e function takes two parameters:\n\n- state ➡️ the most recent state when the reducer function is called.\n- action ➡️ typically an object containing key-value pairs, such as \u003ccode\u003e{type: 'ADD_ITEM', payload: id}\u003c/code\u003e\n\n## 🌐 Using context 🌐\nTo use a context, we need to import two things:\n```javascript\nimport { useContext } from \"react\";\nimport { CartContext } from \"../store/shopping-cart-context\";\n```\nNext, we can destructure the specific context we need from the context object we previously created.\n\n```javascript\nconst { items, updateCartItemQuantity } = useContext(CartContext);\n```\nFinally, we use the context as intended in our application.\n```javascript\nconst totalPrice = items.reduce(\n    (acc, item) =\u003e acc + item.price * item.quantity,\n    0\n  );\n```\n```javascript\n \u003cul id=\"cart-items\"\u003e\n          {items.map((item) =\u003e {\n          //...\n          \u003cbutton onClick={() =\u003e updateCartItemQuantity(item.id, -1)}\u003e\n          //...\n          }\n\u003c/ul\u003e\n```\n\u003e [!NOTE]\n\u003e \u003cstrong\u003eProp drilling\u003c/strong\u003e is passing data through multiple layers of components via props. Context avoids this by providing a way to share data directly with any component, no matter how deep it is in the tree.\n\nWith all the above, we have implemented a global state using context, avoiding prop drilling and separating the state update logic using a reducer. \nThis approach makes our code cleaner, more maintainable, and easier to understand.\n\n\n---\n\u003cp align=\"center\"\u003e🐸 This project is a practice exercise I learned from the \u003ca href='https://www.udemy.com/course/react-the-complete-guide-incl-redux/?couponCode=ST7MT110524'\u003eAcademind's React Course\u003c/a\u003e 🐸\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fch0ripain%2Freact-context-and-reducer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fch0ripain%2Freact-context-and-reducer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fch0ripain%2Freact-context-and-reducer/lists"}