Welcome to the first part of our React + Redux Toolkit course! In this lesson, we’re going to set the foundation for everything we’ll build later. Our goal today is to understand what React and Redux are, why we use Redux Toolkit, and then set up our project environment.

By the end of this lesson, you’ll have a running React project with Redux Toolkit installed — ready for development.

🔹 What is Redux?

As your app grows, managing state (data) across components becomes harder. Different components may need access to the same data, and passing props around can get messy.

This is where Redux comes in.

Redux is a state management library that helps:

• Store data in a centralized place
• Predictably update the UI based on actions
• Make the app easier to debug and scale

However…

🔥 Why Redux Toolkit (RTK) Instead of Old Redux?

The traditional Redux setup required a lot of boilerplate code:

• Action types
• Action creators
• Reducers
• Store setup
• Multiple files just to manage simple logic

Developers found it repetitive and confusing.

Redux Toolkit (RTK) solves that problem.

Benefits of Redux Toolkit:

✅ Less boilerplate ✅ Simpler store configuration ✅ Built-in tools for handling async operations ✅ Workflow that matches how modern React apps are built

You write less code, and your code becomes more readable.

This is why Redux Toolkit is now the official recommended way to write Redux.

When and Why to Use Redux

Welcome back to our React + Redux Toolkit course! In the previous lesson, we set up our React project and installed Redux Toolkit. Before we start writing Redux code, it’s important to understand why Redux is useful in the first place.

In this lesson, we’ll compare local state (React state) and global state (Redux state). We’ll also look at a common issue called props drilling, which is one of the main reasons Redux was created.

🔹 React Local State (useState)

In React, each component can have its own internal state, like:

const [count, setCount] = useState(0);

✅ When local state is a good choice:

• Form input values
• UI toggle state (modal open/close)
• Component-specific state that no one else needs

Local state is simple and fast for small UIs.

🔸 The Problem: Props Drilling

Let’s say you have this component structure:

App
 └─ Header
    └─ UserMenu
       └─ Avatar

The user data is stored in App. But the Avatar component needs access to that data.

So you pass it down…

<App>
  <Header user={user}>
    <UserMenu user={user}>
      <Avatar user={user} />
    </UserMenu>
  </Header>
</App>

This is called props drilling — passing the same data through multiple layers, even when those middle components don’t use it.

Why is this bad?

❌ Harder to maintain ❌ Makes the code noisy ❌ Any state update forces more re-renders ❌ Becomes unmanageable as the app grows

🔥 Enter Redux State (Global State)

Redux solves the props drilling problem by keeping your state in a central place called the store.

Any component can access the store directly, without needing props from parent components.

Global Store
    ↑         ↑
 Avatar   UserMenu   Header   etc...

This makes data sharing clear, predictable, and scalable.

🧱 What We’re Going to Build

To make this course practical, we will build a Pokémon Browser App using the free Pokémon API.

Features we will implement:

• Load Pokémon list from API
• Search & filter Pokémon
• Click Pokémon to view details
• Manage UI states using Redux Toolkit

This will help you learn:

• API calls
• State management patterns
• Component structure
• UI state flow with Redux

🛠 Step 1 — Install Node.js

First, make sure you have Node.js installed.

✅ Download & install from: https://nodejs.org

After installation, check it:

node -v
npm -v

🚀 Step 2 — Create React Project

We will use Vite because it’s faster and more modern than Create React App.

Run:

npm create vite@latest react-redux-course --template react

Then:

cd react-redux-course
npm install
npm run dev

Open the shown local URL in your browser — you should see the basic React app running.

📦 Step 3 — Install Redux Toolkit & React-Redux

Now, let’s install the state management tools:

npm install @reduxjs/toolkit react-redux

That’s it — we’re ready to start using Redux Toolkit in our React app.