Using Redux

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.

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 ...