--- title: "Implementing a global store using React Context and Hook patterns: Part 1 - Best Software Development Team Extension Partner for Nordics" description: Learn implementing a global store using react context and hook patterns part 1 image: https://www.craftsmensoftware.com/hubfs/Imported_Blog_Media/Implementing_React_hook_and_Context.webp --- [Skip to main content](https://www.craftsmensoftware.com/blog/implementing-a-global-store-using-react-context-and-hook-patterns-part-1#main-content) [![Craftsmen-logo](https://www.craftsmensoftware.com/hs-fs/hubfs/Website%202.png?width=200&height=72&name=Website%202.png) ![Craftsmen-logo](https://www.craftsmensoftware.com/hs-fs/hubfs/Website%202.png?width=200&height=72&name=Website%202.png) ![Craftsmen-logo](https://www.craftsmensoftware.com/hs-fs/hubfs/Website%202.png?width=200&height=72&name=Website%202.png) ![Craftsmen-logo](https://www.craftsmensoftware.com/hs-fs/hubfs/Website%202.png?width=200&height=72&name=Website%202.png)](https://www.craftsmensoftware.com) - [About us](https://www.craftsmensoftware.com/about-us) - [Client Stories](https://www.craftsmensoftware.com/client-success-stories) - [How We Work](https://www.craftsmensoftware.com/how-we-work) - [Case Study](https://www.craftsmensoftware.com/case-study) - [Blog](https://www.craftsmensoftware.com/blog) - [Career](https://careers.craftsmensoftware.com/) Open main navigation Close main navigation - [About us](https://www.craftsmensoftware.com/about-us) - [Client Stories](https://www.craftsmensoftware.com/client-success-stories) - [How We Work](https://www.craftsmensoftware.com/how-we-work) - [Case Study](https://www.craftsmensoftware.com/case-study) - [Blog](https://www.craftsmensoftware.com/blog) - [Career](https://careers.craftsmensoftware.com/) - [Get In Touch](https://www.craftsmensoftware.com/contact-us) [Get In Touch](https://www.craftsmensoftware.com/contact-us) ## Implementing a global store using React Context and Hook patterns: Part 1 ![Implementing a global store using React Context and Hook patterns: Part 1](https://www.craftsmensoftware.com/hs-fs/hubfs/Imported_Blog_Media/Implementing_React_hook_and_Context.webp?width=1200&height=820&name=Implementing_React_hook_and_Context.webp) **‘Prop Drilling’** through the React component tree is one of the worst nightmares for developers. For those who don’t know what prop drilling is, it’s the process of passing down data/methods from parent to children within a long hierarchy. It’s not a problem when the tree is small, with one or two-level. But when the React component gets larger, it’s troublesome to keep track of all that ‘life-altering’ props. To solve prop drilling and some related problems, global state management like [Redux](https://redux.js.org/), [Mobx](https://mobx.js.org/README.html), [Unstated](https://github.com/jamiebuilds/unstated), [Apollo Link State](https://www.apollographql.com/docs/link/links/state/), etc. has become unrequitedly popular. Also for React, [react-redux](https://react-redux.js.org/)has become the oneway destination to React developers. But, sometimes for a simple app using those state management solutions might seem overkill. Here comes React to the rescue. Using **React Context API** and **Hook** patterns we can create a Redux-like store, that we can use to store data, call on dispatcher for performing actions, and thus solving the problem of prop drilling without installing any third party state management systems. *Voila!* This will be a two-part article, in the first part, we are going to create a redux like store, let’s call it **‘react-store’** from now on. Then in the next part, we are going to create a simple react app, to apply that **react-store** practically. ## Let’s Get Started To get started we need to understand how **React Context** works. The best way to learn about the Context is to go through the [Official Documentation](https://reactjs.org/docs/context.html). In short, Context is a way to share data across the react-app without having to pass them explicitly (remember, prop drilling). So, we will create a context, then wrap our app with it and any state we keep on the context will be available throughout the app. Seems simple enough. Actually, we will see that it is. Then comes, **React Hooks**. After being included in React’s latest releases, the hooks have become such a buzzword, to be honest, it’s actually deserving. We are going to use `useReducer` hook (Wait, where have I heard the name reducer before? Yeah, right in redux), which to be honest is the more advanced version of `useState` hook. To know more about them go through their [Documentation](https://reactjs.org/docs/hooks-state.html) as usual. Okay, enough chit-chat. Let’s create our desired context: const StoreContext = createContext(); const GlobalStore = props =\> { return \; }; Copy   We have created a context called `StoreContext`. And in the `GlobalStore` function, we are using `StoreContext.Provider` to expose the values throughout the app. Now, let’s add state to our context.: const StoreContext = createContext(); const GlobalStore = props =\> { if (props === undefined) throw new Error( "Props Undefined. You probably mixed up betweenn default/named import" ); const { load, ...rest } = props; const \[state, dispatch\] = useReducer(load.reducer, load.initialState); return \; }; Copy ```   ``` So, we have introduced a local state for the whole context using `useReducer`. It returns `state` which have the initial state of the app that comes from prop `load.initialState` and `dispatch` that can takes actions on the state through the `load.reducer`. We will create a custom hook using `useContext` to expose the values. So, the final file `GlobalStore.js` will look like this: import React, { createContext, useContext, useReducer } from "react"; const StoreContext = createContext(); const GlobalStore = props =\> {   if (props === undefined)     throw new Error(       "Props Undefined. You probably mixed up betweenn default/named import"     );   const { load, ...rest } = props;   const \[state, dispatch\] = useReducer(load.reducer, load.initialState);   return \; }; export const useStore = () =\> useContext(StoreContext); export default GlobalStore; Copy ```   ``` We will now create a `combineReducer` function, just like Redux to combine multiple reducers if needed. The `combineReducer.js` file will look like this: const combineReducer = reducers =\> { const finalReducers = {}; Object.keys(reducers).forEach(key =\> { if (typeof reducers\[key\] === "function") finalReducers\[key\] = reducers\[key\]; else throw new Error(\`${key} reducer must be a function\`); }); const finalReducerKeys = Object.keys(finalReducers); return (state, action) =\> { let hasChanged = false; const nextState = {}; finalReducerKeys.forEach(key =\> { const reducer = finalReducers\[key\]; const previousStateForKey = state\[key\]; const nextStateForKey = reducer(previousStateForKey, action); nextState\[key\] = nextStateForKey; hasChanged = hasChanged || nextStateForKey !== previousStateForKey; }); hasChanged = hasChanged || finalReducerKeys.length !== Object.keys(state).length; return hasChanged ? nextState : state; }; }; export default combineReducer; Copy ```   ``` We will also create a `createStore.js` file just to create an object out of `reducer` and `initialState`. It’s so trivial. const createStore = (reducer, initialState) =\> ({ reducer, initialState }); export default createStore; Copy ```   ``` **TL;DR**: This whole code can be found [**here**](https://github.com/tusher-ahamed/react-store/tree/master/src/react-store). Well, that was easy. We have our lightweight `react-store` ready to be used. In the next article, we will create a simple app and try to use this global store firsthand. This will be exciting. So for now, let me quote **Charles**  **Bukowski**: > If you’re going to try, go all the way. There is no other feeling like that. You will be alone with the gods, and the nights will flame with fire. You will ride life straight to perfect laughter. It’s the only good fight there is*.* const StoreContext = createContext(); const GlobalStore = props =\> { if (props === undefined) throw new Error( "Props Undefined. You probably mixed up betweenn default/named import" ); const { load, ...rest } = props; const \[state, dispatch\] = useReducer(load.reducer, load.initialState); return \; }; Copy   ![Tusher Ahamed](https://www.craftsmensoftware.com/hs-fs/hubfs/Tusher%20Ahmed.png?width=120&height=120&name=Tusher%20Ahmed.png) Author: **[Tusher Ahamed](https://www.craftsmensoftware.com/blog/author/tusher-ahamed)** 18/04/2024 Software Development Engineer II ![Hire AI-Native Engineers](https://www.craftsmensoftware.com/hubfs/Z63_3132.webp) ## Hire AI-Native Engineers [![Book A Strategy Call](https://www.craftsmensoftware.com/hubfs/Book%20A%20Strategy%20Call.svg)](https://www.craftsmensoftware.com/contact-us) ### **About Craftsmen** [The Team](https://www.craftsmensoftware.com/about-us) [Our Partnership Model](https://www.craftsmensoftware.com/how-we-work) [Career](https://careers.craftsmensoftware.com/) [FAQ](https://www.craftsmensoftware.com/frequently-asked-questions-faq) [Privacy Policy](https://www.craftsmensoftware.com/privacy-policy-best-software-development-company-in-bangladesh)  [Craftsmen LinkedIn Page](https://linkedin.com/company/craftsmensoftware)   [Craftsmen Facebook Page](https://www.facebook.com/craftsmenltd/)   [Craftsmen Youtube Page](https://www.youtube.com/@craftsmensoftware) ### **Headquarter** **Craftsmen UK** One Sovereign Quay, Bridge End, Leeds, West Yorkshire LS1 4AG United Kingdom  **Operational Hub Craftsmen Bangladesh** Plot # 316, Lane # 4, DOHS Baridhara, Dhaka - 1206, Bangladesh ### **Sales & Partnership Offices** **Craftsmen Norway** Kong Oscars gate 66, 68, 5017 Bergen, Norway **Craftsmen France** 6 Avenue Pierre Grenier, 92100 Boulogne-Billancourt, Paris, France ### **A Team You Can Trust** #### [![ISO Certificates New](https://www.craftsmensoftware.com/hs-fs/hubfs/ISO%20Certificates%20New.png?width=300&height=96&name=ISO%20Certificates%20New.png)](https://www.craftsmensoftware.com/trust-centre) [![glassdoor (1)](https://www.craftsmensoftware.com/hs-fs/hubfs/glassdoor%20(1).png?width=110&height=79&name=glassdoor%20(1).png)](https://www.glassdoor.com/Overview/Working-at-Craftsmen-EI_IE3004266.11,20.htm) [![goodfirms.co](https://www.craftsmensoftware.com/hs-fs/hubfs/goodfirms.co.webp?width=110&height=95&name=goodfirms.co.webp)](https://www.craftsmensoftware.com/blog/craftsmen-thrives-at-goodfirms-by-offering-scalable-robust-software-solutions-developed-with-quality-by-maestros)    © 2026 Craftsmen. All rights reserved. ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Tusher Ahamed", "url" : "https://www.craftsmensoftware.com/blog/author/tusher-ahamed" }, "dateModified" : "2026-04-30T08:19:46.738Z", "datePublished" : "2024-04-17T18:00:00.000Z", "headline" : "Implementing a global store using React Context and Hook patterns: Part 1 - Best Software Development Team Extension Partner for Nordics", "image" : [ "https://www.craftsmensoftware.com/hubfs/Imported_Blog_Media/Implementing_React_hook_and_Context.webp" ], "mainEntityOfPage" : { "@id" : "https://www.craftsmensoftware.com/blog/implementing-a-global-store-using-react-context-and-hook-patterns-part-1", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.craftsmensoftware.com/hubfs/Craftsmen%20Logo_Black.png" }, "name" : "Craftsmen Ltd." } } ``` ```json { "@context" : "https://schema.org", "@type" : "SoftwareCompany", "address" : [ { "@type" : "PostalAddress", "addressCountry" : "Norway", "addressLocality" : "Oslo" }, { "@type" : "PostalAddress", "addressCountry" : "United Kingdom", "addressLocality" : "London" }, { "@type" : "PostalAddress", "addressCountry" : "France", "addressLocality" : "Paris" }, { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "New York" }, { "@type" : "PostalAddress", "addressCountry" : "Bangladesh", "addressLocality" : "Dhaka" } ], "areaServed" : [ { "@type" : "Country", "name" : "Norway" }, { "@type" : "Country", "name" : "Sweden" }, { "@type" : "Country", "name" : "United Kingdom" }, { "@type" : "Country", "name" : "France" }, { "@type" : "Country", "name" : "United States" }, { "@type" : "Country", "name" : "Bangladesh" } ], "description" : "Trusted AI-native engineering partner providing software team extension, IT staff augmentation, and dedicated developer teams globally.", "logo" : "https://www.craftsmensoftware.com/hubfs/logo.png", "name" : "Craftsmen Software", "url" : "https://www.craftsmensoftware.com" } ```