Using Redux
Explore how to implement Redux in Next.js to manage global state effectively. This lesson guides you through setting up the Redux store, creating reducers, connecting Redux with React components, and updating UI state dynamically. Understand how Redux differs from Context APIs and gain skills to handle complex application states and debugging with Redux DevTools.
We'll cover the following...
In 2015, two years after the initial React public release, there weren’t as many frameworks and libraries as today for handling large-scale application states. The most advanced way for handling unidirectional data flow was Flux, which, as time has passed, has been superseded by more straightforward and modern libraries such as Redux and MobX.
Redux, in particular, had a significant impact on the React community and quickly became a de facto state manager for building large-scale applications in React.
In this lesson, we’ll be using plain Redux (without middleware such as redux-thunk or redux-saga) for managing the storefront state instead of using the React Context APIs.
Let’s start with the boilerplate code.
Click the “Run” button below to execute the code. Once the execution is completed, observe the output by navigating to the link provided at the bottom of the playground.
export PORT=5000 ln -s /app/node_modules/ /usercode/boilerplate cd /usercode/boilerplate npm run dev
At this point, we’ll need two new dependencies, redux and react-redux.
We can also use redux-devtools-extension, which allows us to inspect and debug the application state from our browser.
Now we can start coding our Next.js and Redux application.
First of all, we’ll need to initialize the global store, which is the part of our ...