React Context API a valid alternative to Redux.

Over the last 5 or 6 years, I often had the need of prototyping ideas in simple MVP in order to validate them and then, sometimes keep iterating on them until reaching the point of moving the "prototyped" MVP into a "real" product. I always tried to not fall into the routine of building the same infrastructure/stack, again and again, mainly for two reasons. 

1. Repetitive work will not bring any kind of innovation.
2. It was the only "effective" way to keep myself up to date with the latest technologies. 

I still think this is a good approach but I lately realise, especially in web-apps context, you will always end with some "pillar" or combination of "pillars" that need to be in place.

I have to admit that on the React side, the react-create-app makes a big difference. I always end up installing some other pack that I feel is needed.

In my case for example I always add from the begin: 

• Redux (thunk or saga)
• Material-UI

At least this was my approach until I did not start to using the React Context more and more. I personally like the context idea, somewhat for me it makes more sense the way context operates, how different parts of the app can sync on different contexts etc etc. 

First time that I noticed the advantage of using a context whas when I was actually digging into the <ThemeProvider/> of material-ui. The way the custom-theme of material-ui was actually available to all material-ui components, made me realise that this approach was actually not much different, on the end result, from the way Redux was exposing the globalState to all connected components in a normal react-redux webapp. 

So a sort of fun idea pop-up into my mind. What if I replace the entire Redux state with the react context? I tried it and it seems to work :)

I had to admit that the first attempt with: 

• 1 Context
• 1 Actions set
• 1 Reducer set

It was quite easy and straightforward.

But what if I want to keep 1 context but I have actions and reducers separated by "domains"?

So here goes the solution I found and I would like to share to get some feedback!:) Source code (GitHub). As you can see it is a basic react repo except for the context folder:

Context

As I said before I would like to keep havin a single context, but I would like (to keep the code clean) to split all the actions and reducers in separated files, but keep having all of them accessibles from any component. 

Actions

This was quite easy, as you can see I have the index.js collecting all actions and exposing them in a centalysed way. 

Reducers

For those, it was a bit of a "creative" solution. What I'm basically doing is combining all reducers in that way the state will always pass through all of them and just apply the needed transformation based on the dispatched action. 

GlobalContext provider

Lately I'm importing and serving actions and state to all childrens of the <GlobalContext>. 

Usage

Than you can use it as you normally do for context hooks:

Wrap the components

Access the state and use the actionRooter from all component without needs to mapping them :)

Persona conclusion

I'm actually using this approach in several MVP projects and seems to work pretty fine and without the need of using and dealing also with Redux. 

Here you have a similar boilerplate that also include material-ui,

Here there is the Typescript vesrion that include MUI5 and ThreeJS

Here there is the React Native version

That's it! Feedback is more than welcome!