React Hook useContextAndReducer

I’ve been tinkering with React quite a lot as of recently & I’ve been working on some very complex systems, one’s where there are so many variables associated with state that one minor modification has an immensely dramatic impact on the overall application state.

I mean this application has got to the point where it’s so complex that I’ve even adopted nested reducers, i.e. on the action that’s passed into the dispatch function, it has both a type & a parent type to distinguish which reducer needs to be used for a given action at a given point.

But one thing that I’ve been trying to achieve is to essentially merge the state that’s handled within these reducers with a given context so that the state can be shared across a vast number of components. Queue the birth of the useContextAndReducer hook. I decided that it would be appropriate to create a hook for this specifically because I found that there are several places throughout the application that needed to merge local state with the global state in a seamless & simplistic fashion.

Obviously I had to go with a to-do application, would I even be a competent React developer if I didn’t do either a to-do application or some counter application? I think not! Anyway I hope that you quite like this approach, if you have any better ideas, I’d love to hear from you! 🙂