Redux-Like Pattern Leveraging Context API and Next JS


Next.js

Updated Oct 1st, 2022

There is a redux, redux toolkit, and a redux-like pattern implemented with React’s context API. The last one is what is discussed below.

Note: You can also leverage the “useContext” hook with “useState” instead of “useReducer.” I also choose to leverage useImmerReducer instead of just useReducer.

Good video by Lee Robinson from July 2020 here on using “global state” in a Next JS environment to get around prop drilling and the implications.

In the video he talks about the fact that React’s built-in context API is really not a state management tool until you combine it with “useState” or “useReducer.” I also liked what he said about Immer, mentioning that “Immer just allows you to write code in a mutable fashion that produces an immutable result.”

Random

Looks like it is best practice to use all caps for the action name in the switch statement.

This article is a nice explanation of how to create a simple web-shop demo implementing a redux-like pattern implemented with React’s Context API and useReducer.