Global State Management

Why the post?

Here, I cover some of the problems I get stuck on and new concepts I learn as a result of it, working as a Software Engineer with Archimydes- A Software Engineering Guild. The issues that I discuss here might not be as complicated per se, but they are something you could get stuck on for a while (like I did). I get stuck on web-related issues, solve them, and share the experiences here so that you don't repeat my mistakes! If that sounds good, read on. Happy reading! :-)

If you have built an application using React, you have probably shared some data among the components. We usually lift the state up to the parent and pass it down to the children as props.

It works for smaller pet projects but quickly becomes an issue as the application grows in the number of components. There is a lot of redundant code, and it becomes unmanageable after a certain limit.

So, for a medium-large application, a better approach to share data throughout, without explicitly passing it down as props, would be via Global State.

How do you Maintain Global State?

This is where Redux made a market for itself, managing the state globally and having a single source of truth throughout. There are other alternatives, but Redux by far is the most popular one out there.

For a beginner, something like Redux could be intimidating and a bit too much. The other solution, in that case, is using React's inbuilt Context API along with React Hooks. It can be used where low-frequency updates are required, like themes, user auth, etc.

There are two advantages I find to using React's Context API over Redux:

• I find it slightly more straightforward.
• There is no third-party library involved, everything is native to React, so the final bundle size is also reduced.

Now, let's talk about how to make it work in your application.

How to setup Context API state Management

Before setting up state management via Context API, you need to know a couple of concepts.

1. Actions: the name is quite verbose in itself. These denote the action that is to be performed, e.g., TOGGLE_MODAL, LOGOUT_USER, etc. It's the convention to name them in all caps.

2. Dispatch: this is the function that in turn dispatched the action, triggering the state change. It takes the Action as an input. You can structure your actions any way you like and program your Reducer (will talk about it next) accordingly.

3. Reducer: this is a pure function which returns the new state from the previous one basis the action type and payload(if any) specified.

That's all the basic concepts you need to understand; the rest of the few things we'll discuss along with the code.

Following are the main steps you need to implement your own global state management solution using React Context API. The steps are followed by the example code snippets that can be used.

STEP 1:

Setup the reducer.

STEP 2:

Create a context.

Create a wrapper component to expose the state and dispatch, to all the children.

Create a custom hook for ease of use in the application.

STEP 3:

Wrap your entire application inside the above-created context wrapper. It can be possibly done at many places, but the general practice is to place it outside where you define your routes, something like the snippet below.

That is all the steps you need to set up the Context API for Global State Management in React.

Now all that is left is, using the state, dispatch. This is as simple as using any other hook.

Since we wrapped all our routes inside the Context Wrapper Component, we can now use the state or dispatch everywhere in all the routes.

Conclusion

• Sharing state via props down from the parent works for smaller applications but becomes cumbersome as the app grows in size.
• Redux as a state management solution might seem a bit complicated to a beginner.
• The alternative to Redux is using the React Context API along with Hooks to achieve Global State Management.

I hope you found this helpful and gained something out of this short article. I would be glad if you could share your thoughts with me on Twitter: vdahiya or LinkedIn: vinay-kumar-dahiya

I look forward to your comments and suggestions.

If you are interested in joining the guild, register your interest here and we'll get in touch.

Happy Coding!