React Context API — Setting up a global store schema

Today, we are gonna talk about global state management in a React application. As we know, Redux is still the most used library when it comes to handle a huge amount of data in a React application.

But today, we’ll focus on how we can handle data in a React way without third party library. We will use React Context API, it is already embedded with the react package. See the official docs here.

1. First, let’s set up our global store schema.

At this step, we just write a simple react code.

The key is createContext function, we assign it to theGlobalStore variable. We call this function to create, as its name shows, a context data that shareable across the entire app.

Note that we need to pass an empty object in the createContext function as argument to initialize our store data.

Create global store main schema

Now that our context was defined, we can use it.

When creating a context, it’ll provide a Provider and a Consumer component that allows us to pass our data to any child component.

We will create the StoreProvider component that returns the GlobalContext.Provider . Note that this provider needs a value props, all data we pass in this value props will be available to all children components.

Now let’s create our consumer. We won’t use the StoreProvider.Consumer this time. Instead, we have the useContext hook provided in the react package that will give more flexibility when reading data in our context. To read a context data, call the useContext function inside our component with a context as an argument. Here we’ll have useContext(GlobalContext); .

But to avoid importing our context and calling this function everytime in our children components, we’ll create a custom consumer hook: useStore that will do the job for us. I’ll will consume the context data and then return the value when we call it anywhere in our app.

2. Setup data with custom hooks

We have our context now but with empty value / state. Our main goal is to have a global state available across the app. We can create a internal state inside our StoreProvider component itself, and then pass the state value and/or its setter to our provider value. But with custom hooks, we can do better and have a separate states and logics depends on our needs. We’ll use an ordinary React component without reducers, actions, types, etc.

Let’s create our first hook, it will be a simple user handler.

Create a custom hook to handle authentication

And now, we’ll add another hook to handle social posts. we can create as much hooks as we need.

Add another hook for posts

Now, it’s time to update our GlobalStore to use our custom hooks.

Update the global store

As you can see, we have our hooks values inside our provider value props. So they can be accessible from anywhere in our app.

3. Use our context in the app

Before using our global state in our component, make sure to import our StoreProvider in the top level of our application, or, at least, on top of the parent component where the global state is needed.

Wrap our main app with the store provider

Last step is to use the global state in our components. Any component inside the StoreProvider will have access to it.

Consuming store data from any child component

Great! he have now a global state for our React app. Happy hacking !