Documentation: Redux and Redux toolkit.
Note: Redux toolkit is the more opinioned version of redux. The Redux team recommends using Redux Toolkit anytime you need to use Redux.
Overview of the redux pattern: We treat our app data or state as a global immutable object. The only way we can change the current state of the app is by dispatching actions (on say a button click for example) and the payload for that action will go to a reducer function to determine what the next state will look like. The store itself is an observable so everything will happen in a reactive way meaning anything that subscribes to the store will be updated with the latest data.
The benefits of this pattern is we have one-way data flow that provides a history, predictable of all the changes that occur in the app, so we can do time-travel debugging.
I am a fan of Using React’s Context API and “useReducer” but many teams still use redux. Almost 60% of react projects are built with redux.
UI State and Server-Caching state. More from Lee Robinson here. Redux is one many choices. 20 reviewed by Jack Herrington here.
In the Jack Video he explains that react hooks need to be the foundation. Leverage useState / useReducer to create state and then useEffect/useMemo/useCallback to monitor that state. He explored the different options with an example that had three important properties of state management. Stop watch app that gets and sets basic state values by starting and stopping a timer, basically a boolean. Once the timer passes 2 seconds it makes a fetch call, asynchronous work. And third, connecting values/business logic in the same model. Jack said after the research he ended up with a conceptual framework to put these into different state managers into different categories as seen here. Redux and Redux toolkit was in the “unidirectional” category and had the most NPM downloads on the list. Mentions that redux toolkit compared to old school redux is amazingly simpler.
Video here. Uses libraries the following libraries: next-redux-wrapper (229k weekly), redux (8.3m weekly), and react-redux (6.3m weekly) with npm downloads as of 10/1/22
redux
-actions
-reducers
-rootReducers.js
-main.js
types.jsHerrington has us covered here
NextJS + State Management = Good Idea???
Mentions “next-redux-wrapper” a little behind the times in March 2022? Shows his implementation with Redux-Toolkit. Also talks Zustand as a simpler alternative to Redux in the uni-directional data flow category of state managers.
Mosh has a good course on Redux and the first hour is on YouTube and the notes for that video are here, (Original Redux in non-NextJS environment).
Log Rocket Article on using Redux with Next JS here (Redux toolkit and next-redux-wrapper)
State Management and More from Lee Robinsons July 2020 here