Make it Easy to Manage State with Redux + Redux Toolkit with Next13

Manage State using Redux + Redux Toolkit with Next13

Another post about Manage State on React, after using React Context API and Zustand on this post i will using one of the most popular state management that is Redux. But to write redux traditionally can be a bit of a pain for that we use some help from Redux Toolkit to simplify.

For this post we can try to create app liked song, when you click like on the list song you can see how much song that you liked like this preview:

Prerequisite:

1. Next JS (App Router) ≥ 13.5
2. Radix UI/React Icon
3. Redux
4. Redux Toolkit

// Create new app
npx create-next-app@latest

// Install React Icons
npm i @radix-ui/react-icons

// Install Redux Toolkit
npm i @reduxjs/toolkit

// Install Redux
npm i react-redux

If you done install all package, next step to create ui for the app.

Step 1: Build UI