
# 🧠 Redux Toolkit – A Real-World Example: User Authentication

**Redux Toolkit (RTK)** is the official, recommended approach for writing Redux logic. But it can be easy to forget and miss on the structure when you haven't work in it for a while or you join a new project that build its structure long time ago. 

For that reason I wanted to create this article that works as a refresher summary where I define every file and the purpose by means of examples.

---

## 🧩 Core Concepts
```
| Concept             | Purpose                                                              |
|---------------------|-----------------------------------------------------------------------|
| `configureStore`    | Creates the Redux store with sensible defaults                        |
| `createSlice`       | Combines reducer, action creators, and initial state in one           |
| `createAsyncThunk`  | Manages async logic and auto-generates pending/fulfilled/rejected     |
| `useDispatch`       | React hook to dispatch actions                                        |
| `useSelector`       | React hook to access store state                                      |
```
---

## 🧪 Real-World Use Case: User Authentication

We'll create a small app where:

- A user can **log in**
- JWT token and user data are stored in **Redux state**
- Token is **persisted** in `localStorage`
- Auth state is accessed across components

---

## 📁 Suggested Folder Structure

```angular2html
src/
├── app/
│ └── store.js # Store configuration
├── features/
│ └── auth/
│ ├── authSlice.js # Redux slice for auth
│ └── authAPI.js # API logic
├── components/
│ └── LoginForm.jsx
```

## 🛠 Step-by-Step Guide

### 1. `store.js` – Create the store

```js 
    //src/app/store.js
    import { configureStore } from '@reduxjs/toolkit'
    import authReducer from '../features/auth/authSlice'

    export const store = configureStore({
      reducer: {
        auth: authReducer,
      },
    })
```
---

### 2. `authSlice.js` – Auth logic with `createAsyncThunk`
```js
    // src/features/auth/authSlice.js
    import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
    import { loginAPI } from './authAPI'

    const token = localStorage.getItem('token')

    const initialState = {
      user: null,
      token: token || null,
      status: 'idle',
      error: null,
    }

    export const loginUser = createAsyncThunk(
      'auth/loginUser',
      async (credentials, thunkAPI) => {
        try {
          const response = await loginAPI(credentials)
          return response
        } catch (err) {
          return thunkAPI.rejectWithValue(err.message)
        }
      }
    )

    const authSlice = createSlice({
      name: 'auth',
      initialState,
      reducers: {
        logout: (state) => {
          state.user = null
          state.token = null
          localStorage.removeItem('token')
        },
      },
      extraReducers: (builder) => {
        builder
          .addCase(loginUser.pending, (state) => {
            state.status = 'loading'
          })
          .addCase(loginUser.fulfilled, (state, action) => {
            state.status = 'succeeded'
            state.user = action.payload.user
            state.token = action.payload.token
            localStorage.setItem('token', action.payload.token)
          })
          .addCase(loginUser.rejected, (state, action) => {
            state.status = 'failed'
            state.error = action.payload
          })
      },
    })

    export const { logout } = authSlice.actions
    export default authSlice.reducer
```
---

### 3. `authAPI.js` – Fake API login
```js
    // src/features/auth/authAPI.js
    export const loginAPI = async ({ email, password }) => {
      if (email === 'admin@site.com' && password === '123456') {
        return {
          user: { id: 1, name: 'Admin', email },
          token: 'fake-jwt-token-123',
        }
      } else {
        throw new Error('Invalid credentials')
      }
    }
```
---

### 4. `LoginForm.jsx` – Component using the auth state
```js
    // src/components/LoginForm.jsx
    import React, { useState } from 'react'
    import { useDispatch, useSelector } from 'react-redux'
    import { loginUser } from '../features/auth/authSlice'

    export default function LoginForm() {
      const dispatch = useDispatch()
      const auth = useSelector((state) => state.auth)
      const [email, setEmail] = useState('')
      const [password, setPassword] = useState('')

      const handleLogin = (e) => {
        e.preventDefault()
        dispatch(loginUser({ email, password }))
      }

      return (
        <form onSubmit={handleLogin}>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="Email"
          />
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="Password"
          />
          <button type="submit">Login</button>

          {auth.status === 'loading' && <p>Loading...</p>}
          {auth.error && <p style={{ color: 'red' }}>{auth.error}</p>}
          {auth.user && <p>Welcome, {auth.user.name}!</p>}
        </form>
      )
    }
```
---

## 💡 What You Get

✅ Centralized user auth state  
✅ Automatic loading/error handling  
✅ Token stored in localStorage  
✅ Easy access to user across the app  
✅ Scalable, testable, and clean setup

---

## 🔐 Bonus: Rehydrate Token on App Load
```js
    // in App.jsx or a layout component
    useEffect(() => {
      const token = localStorage.getItem('token')
      if (token && !auth.token) {
        // Optionally re-fetch user data here using a new thunk
        dispatch(rehydrateUserFromToken(token))
      }
    }, [])
```
> You’d have to implement `rehydrateUserFromToken` as another `createAsyncThunk` if needed.

# Redux Toolkit: Simple Analogies Summary

### 1. **Store**
Think of it as the **central library** where all your app’s state books live. It keeps everything organized and ready to be accessed or updated.

### 2. **Slice** (`createSlice`)
Imagine a **book section** in the library dedicated to one topic (like "auth" or "products"). It contains the state, the rules to update it (reducers), and the bookmarks (actions) to mark those updates.

### 3. **Action**
An **instruction slip** you send to the library saying “Please update this section like so.” It’s a simple message describing *what* you want changed.

### 4. **Reducer**
The **librarian** who reads the instruction slip (action) and updates the books (state) accordingly, making sure everything stays organized and consistent.

### 5. **Thunk** (`createAsyncThunk`)
The **messenger** who can go outside the library (perform async tasks like API calls), fetch new information, and then come back with instructions for the librarian to update the books.

### 6. **`configureStore`**
The **library builder** who sets up the library with the right sections (reducers), adds helpers (middleware like thunk), and ensures the system works smoothly.

### 7. **`useDispatch`**
Your **mailbox** to send instruction slips (actions) to the librarian.

### 8. **`useSelector`**
Your **window** to look inside the library and read the current state of any section you want.

---

This way, Redux Toolkit is like a well-run library with clear roles:

- You send requests (actions) through your mailbox (`useDispatch`).
- The librarian (reducer) updates the right section (slice) of the library.
- The messenger (thunk) can do errands (async work) before updating things.
- And you always have a window (`useSelector`) to see the latest info.

---

Now it's your turn. The best way to learn is to practice. Go build something on your own!

Redux Toolkit: an example


# Mastering Object-Oriented Programming (OOP) with a Simple Task Manager in JavaScript

Object-Oriented Programming (OOP) is one of the most important paradigms in modern software development. But often, learning OOP in theory doesn’t help much when it comes to applying it in real-world projects. In this article, we will walk through building a **Task Manager** application in **vanilla JavaScript** while implementing core OOP principles such as **Encapsulation, Abstraction, Inheritance, and Polymorphism**.

By the end of this guide, you’ll not only understand OOP concepts but also see **how they translate into actual coding practices**.

---

## What is Object-Oriented Programming (OOP)?

OOP is a programming paradigm that structures code around objects rather than functions and logic. The four fundamental principles of OOP are:

1. **Encapsulation**: Grouping related variables and functions into objects and restricting direct access to their internal state.
2. **Abstraction**: Hiding unnecessary implementation details and exposing only the essential parts.
3. **Inheritance**: Allowing one class to inherit properties and methods from another class.
4. **Polymorphism**: Enabling objects of different classes to be treated as instances of the same class through method overriding.

Now, let’s see how these principles apply in a practical scenario.

---

## Step 1: Setting Up the Project Structure

We will organize our **Task Manager** project in the following structure:

```
/task-manager
├── /css
│   └── styles.css
├── /js
│   ├── task.js        # Task class (Encapsulation)
│   ├── taskList.js    # TaskList class (Abstraction)
│   ├── taskUI.js      # TaskUI class (Separation of concerns)
│   └── app.js         # Main application logic
├── index.html         # The main HTML file
└── README.md          # Project documentation
```

Each JavaScript file will represent a different responsibility in our project, adhering to the **Single Responsibility Principle (SRP)** from SOLID principles.

---

## Step 2: Defining the Task Class (Encapsulation)

Encapsulation means bundling data (properties) and methods inside a class. Let’s create a `Task` class that represents a single task:

```javascript
// js/task.js
class Task {
    constructor(name, dueDate, priority) {
        this.name = name;
        this.dueDate = dueDate;
        this.priority = priority;
    }

    display() {
        return `${this.name} (Due: ${this.dueDate}, Priority: ${this.priority})`;
    }
}

export { Task };
```

The `Task` class encapsulates all task-related data and behavior. It provides a `display()` method to return a readable string representation of the task.

---

## Step 3: Creating a Task List (Abstraction)

Instead of handling an array of tasks directly, we use a `TaskList` class to **abstract** task management.

```javascript
// js/taskList.js
import { Task } from './task.js';

class TaskList {
    constructor() {
        this.tasks = [];
    }

    addTask(name, dueDate, priority) {
        const task = new Task(name, dueDate, priority);
        this.tasks.push(task);
    }

    getTasks() {
        return this.tasks;
    }
}

export { TaskList };
```

The `TaskList` class hides the complexity of managing an array of tasks, exposing only the necessary methods.

---

## Step 4: Managing the UI with a Separate Class

To ensure **separation of concerns**, we create a `TaskUI` class to handle **DOM manipulation**.

```javascript
// js/taskUI.js
import { TaskList } from './taskList.js';

class TaskUI {
    constructor() {
        this.taskList = new TaskList();
        this.taskContainer = document.getElementById('taskContainer');
    }

    addTaskHandler() {
        const name = document.getElementById('taskName').value;
        const dueDate = document.getElementById('taskDueDate').value;
        const priority = document.getElementById('taskPriority').value;

        if (name && dueDate) {
            this.taskList.addTask(name, dueDate, priority);
            this.render();
        }
    }

    render() {
        this.taskContainer.innerHTML = '';
        this.taskList.getTasks().forEach(task => {
            const taskElement = document.createElement('div');
            taskElement.textContent = task.display();
            this.taskContainer.appendChild(taskElement);
        });
    }
}

export { TaskUI };
```

Now, our UI logic is **encapsulated** inside `TaskUI`, making it easy to modify or extend later.

---

## Step 5: Bringing Everything Together in `app.js`

```javascript
// js/app.js
import { TaskUI } from './taskUI.js';

const ui = new TaskUI();
window.ui = ui;
```

Here, we instantiate the `TaskUI` class and assign it to `window.ui` so it can be accessed from the HTML.

---

## Step 6: Adding Simple Styling

```css
/* css/styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

#taskContainer div {
    padding: 10px;
    border: 1px solid #ccc;
    margin: 5px 0;
}
```

This gives a basic structure to our task list.

---

## Final Thoughts on OOP Implementation

We’ve built a fully functional **Task Manager** app while applying **OOP principles**:

✅ **Encapsulation**: The `Task` class encapsulates task properties and behavior.
✅ **Abstraction**: The `TaskList` class abstracts the logic of task management.
✅ **Inheritance**: This project doesn’t use inheritance directly, but you could extend the `Task` class (e.g., `RecurringTask`).
✅ **Polymorphism**: If multiple task types were implemented, they could share the same interface and behave differently when `display()` is called.

By structuring our code with OOP, we ensure that our project is **scalable, modular, and easy to maintain**.

### What’s Next?
- Add **localStorage** to persist tasks.
- Implement **task deletion and editing**.
- Extend with **Inheritance** (e.g., `RecurringTask`).

By practicing OOP in small projects like this, you’ll build a **strong foundation** for working with more advanced architectures in **React, Next.js, and other frameworks**.

Happy coding! 🚀



Mastering Object-Oriented Programming (practicing-OOP) with a Simple Task Manager in JavaScript


# The Event Loop: Why JavaScript Isn’t Really Single-Threaded

JavaScript is often said to be a **single-threaded** language. But what does that even mean? And if JavaScript is single-threaded, how can it handle things like asynchronous tasks, such as waiting for data from a server? How does it manage all of this without blocking the rest of the code? The answer is the **Event Loop**.

Let’s dive in and break it down! 🚀

---

## 🤔 What Does Single-Threaded Mean?

When we say JavaScript is single-threaded, we mean that it runs on just one **thread** of execution at a time. A thread is essentially a sequence of instructions that the CPU follows to perform tasks.

If you’ve worked with other programming languages, you might know that they can be multi-threaded, meaning they can execute multiple pieces of code at once. But JavaScript, by default, only runs one thing at a time.

So, how does JavaScript manage multiple tasks like HTTP requests, timers, or animations without freezing up? The secret is in the **Event Loop**.

---

## 🔄 The Event Loop: JavaScript’s Magic Behind the Scenes

At the heart of how JavaScript handles multiple tasks is the **Event Loop**. The Event Loop is a mechanism that allows JavaScript to perform non-blocking asynchronous operations, even though it's single-threaded. Here’s how it works:

1. **Call Stack:** This is where the functions that are currently executing live. The browser or Node.js processes one function at a time here.

2. **Web APIs:** When JavaScript encounters things like `setTimeout()`, `fetch()`, or event listeners, these tasks are handled by the browser’s Web APIs, not the JavaScript engine directly. These tasks run in the background, outside the call stack.

3. **Callback Queue:** Once the Web APIs finish their job (like fetching data or waiting for a timeout), they send their results to the **callback queue**. This queue holds the functions that need to be executed once the call stack is empty.

4. **Event Loop:** The Event Loop constantly checks if the call stack is empty. If it is, it pushes the first function from the callback queue to the call stack for execution.

---

## 🔍 Visualizing the Event Loop

Let’s look at an example to see how the Event Loop works.

```js
console.log('Start');

setTimeout(() => {
    console.log('Timeout');
}, 2000);

console.log('End');
```

### 🤯 What Happens Here?

1. `'Start'` is logged immediately because it's on the call stack.
2. `setTimeout()` is called, but the callback function is handed off to the Web API to wait for 2 seconds.
3. `'End'` is logged immediately after because it's also on the call stack.
4. After 2 seconds, the callback function from `setTimeout()` moves to the callback queue.
5. The Event Loop sees that the call stack is empty, so it moves the callback function from the queue to the stack, where `'Timeout'` is logged.

---

## 🕒 Non-Blocking & Asynchronous Operations

The key takeaway here is that JavaScript is **non-blocking**. While JavaScript is waiting for something (like data from a server or a timer), it doesn't freeze or block other tasks. It’s able to run other code while waiting, thanks to the Event Loop.

For example, the code above doesn’t wait for the timeout to finish before logging `'End'`. It **doesn't block** the execution of `'End'`, which demonstrates the asynchronous nature of JavaScript.

---

## 🧑‍💻 Why Does This Matter?

Knowing how the Event Loop works can help you write more efficient code, especially in environments like web browsers and Node.js where asynchronous operations are crucial. It’s also important for understanding concepts like:

- **Concurrency**: Managing multiple operations at once without blocking the main thread.
- **Callbacks**: Functions passed as arguments to be executed later.
- **Promises**: A cleaner way to handle asynchronous operations.

---

## 🚀 Final Thoughts

JavaScript is indeed single-threaded, but it’s far from being limited. With the Event Loop, JavaScript can handle multiple tasks at once by processing asynchronous events without blocking the main thread. Understanding how the Event Loop works opens up a whole new level of understanding for JavaScript, helping you write better and more efficient code.

Got any questions about the Event Loop or asynchronous programming? Let’s talk in the comments! 🚀

The Event Loop: Why JavaScript Isn’t Really Single-Threaded


# Closures Explained Like You’re Five

Closures might sound like a complicated concept, but they are actually pretty simple once you break them down. If you've ever heard the term and thought, "What is that?"—don’t worry! Let’s explain closures in a way that even a five-year-old could understand.

---

## 🎭 Imagine a Magic Backpack

Imagine you have a magic backpack. Anything you put inside this backpack stays with you forever, even if you leave the room where you packed it. You can take things out whenever you want, but no one else can see what's inside.

Closures in JavaScript work just like that! When a function is created inside another function, it remembers the variables from the outer function—even after the outer function has finished running.

Let’s see it in action! 🎬

---

## 🏗 A Simple Closure Example

```js
function outerFunction() {
    let name = "Alice"; // This variable is inside the outer function
    
    function innerFunction() {
        console.log("Hello, " + name); // The inner function remembers "name"
    }
    
    return innerFunction;
}

const myClosure = outerFunction(); // The outer function runs and returns innerFunction
myClosure(); // "Hello, Alice" (innerFunction still remembers "name")
```

### 🔍 What’s Happening Here?
1. `outerFunction` creates a variable `name`.
2. Inside `outerFunction`, there’s another function called `innerFunction`.
3. `innerFunction` uses `name`, but it’s inside `outerFunction`.
4. When we run `outerFunction()`, it **returns** `innerFunction`, but the magic happens when `innerFunction` still **remembers** `name`, even after `outerFunction` has finished running!

This is a **closure**—a function that remembers the variables from where it was created.

---

## 🎮 Another Example: Making a Counter

Closures are useful for keeping data **private** and creating things like counters.

```js
function createCounter() {
    let count = 0;
    
    return function () {
        count++;
        console.log("Current count: " + count);
    };
}

const counter = createCounter();
counter(); // "Current count: 1"
counter(); // "Current count: 2"
counter(); // "Current count: 3"
```

### 🤯 Why Does This Work?
- `count` is inside `createCounter`, so it’s **not directly accessible** from outside.
- The returned function **remembers** `count` because of closures.
- Every time we call `counter()`, it increases the stored `count`.

Without closures, `count` would be reset every time `createCounter()` is called.

---

## 🚀 Why Should You Care?
Closures are everywhere in JavaScript. They are useful for:
- **Encapsulating private variables** (like in the counter example).
- **Handling asynchronous operations** (like in `setTimeout`).
- **Event listeners and callbacks**.
- **Creating factory functions and modules**.

---

## 🏁 Final Thoughts
If closures still seem tricky, don’t worry! The best way to understand them is to **experiment**. Try writing your own closure-based functions and see how they remember variables.

Remember the magic backpack analogy: **A closure holds onto variables even after the outer function is gone.**

Got any questions or examples where closures confused you? Let’s discuss in the comments! 🚀



Closures Explained Like You’re Five

# Hoisting, Coercion, and More

JavaScript is an awesome language, but let’s be real—it has some weird quirks. If you've ever been surprised by JavaScript's behavior, you're not alone. Let's explore a few of the "weird parts" of JavaScript, including **hoisting, type coercion, and some other odd behaviors** that can trip up even experienced developers.

## 1. Hoisting: Variables That Seem to Magically Move

Hoisting is JavaScript’s way of moving function and variable declarations to the top of their scope. But **only the declarations are moved, not the assignments.**

### Example:
```js
console.log(name); // undefined
var name = "Alice";
console.log(name); // "Alice"
```

Why does this happen? Because JavaScript **hoists** the variable declaration (var name;) to the top, but not the assignment (name = "Alice"). So internally, the code runs like this:

```js
var name;
console.log(name); // undefined
name = "Alice";
console.log(name); // "Alice"
```

#### What about let and const?
Unlike var, variables declared with let and const are also hoisted but **stay in a "temporal dead zone"** until they are initialized.

```js
console.log(age); // ReferenceError: Cannot access 'age' before initialization
let age = 30;
```

Lesson? Use let and const instead of var to avoid hoisting confusion.

---

## 2. Type Coercion: JavaScript’s Best Guess
JavaScript loves to convert types for you. Sometimes this is useful, other times it leads to **unexpected** results.

### Example:
```js
console.log(5 + "5"); // "55" (number + string = string)
console.log("5" - 2); // 3 (string is converted to number)
console.log(0 == false); // true (because 0 is "falsy")
console.log([] == 0); // true (empty array converts to "")
```

Why does this happen? JavaScript automatically converts types to try to make sense of what you’re doing. This is called **type coercion**.

#### How to avoid coercion issues?
- **Use strict equality (===)** instead of loose equality (==).
- **Explicitly convert values** instead of relying on JavaScript’s guesses.

Example:
```js
console.log(Number("5") + 5); // 10
console.log(Boolean("")); // false
console.log([] === 0); // false (strict equality avoids type conversion)
```

---

## 3. Other Weird Behaviors

### **Truthy and Falsy Values**
Some values are automatically considered "truthy" or "falsy" in JavaScript. Check this out:

```js
if ("0") console.log("Truthy!"); // This runs, because "0" is a non-empty string
if (0) console.log("Falsy!"); // This does NOT run, because 0 is falsy
```

Values that are **falsy** in JavaScript:
- false
- 0
- "" (empty string)
- null
- undefined
- NaN

Everything else is truthy, even "0" and "false" as strings!

### **Adding Arrays and Objects**
Ever tried adding arrays or objects?

```js
console.log([] + []); // "" (empty string)
console.log([] + {}); // "[object Object]"
console.log({} + []); // "[object Object]" (Weird behavior due to automatic type conversion)
```

### **Function Overloading Doesn't Work Like You Think**
Unlike other languages, JavaScript doesn’t support function overloading in the usual way.

```js
function greet(name) {
console.log("Hello, " + name);
}

function greet() {
console.log("Hi there!");
}

greet("Alice"); // Output: "Hi there!" (the second function overwrites the first)
```

### **NaN is Not Equal to Itself**
NaN (Not-a-Number) is the only value in JavaScript that **is not equal to itself.**

```js
console.log(NaN === NaN); // false
```

If you need to check if a value is NaN, use Number.isNaN(value) instead.

```js
console.log(Number.isNaN(NaN)); // true
```

---

## Conclusion
JavaScript has its quirks, but understanding them makes you a better developer. **Hoisting, type coercion, and truthy/falsy values** are just a few of the many things that can surprise you. The key is to always test your assumptions and write clear, explicit code.

Got any other weird JavaScript behaviors that confused you? Share them in the comments! 🚀

The Weird Parts of JavaScript: Hoisting, Coercion, and More


Hey People! 👋 Ever found yourself in the JavaScript jungle wondering about the difference between forEach() and map()? 👨‍💻Yeah, been there too!

I've noticed these two methods being swapped like Pokémon cards, and they're not quite the same! So, let's clear the air.

💚 forEach(): It's like having a to-do list. You go through each item, do something with it, BUT it doesn't hand you a new list. Just a good ol' task completion vibe.
❤️ map(): Now, this one is called by what it really does. It not only takes you through the list and does whatever bunch of logic you want, but hands you a whole new Array. Mapping at its finest!

In the coding rush, we might mix them up. (Been there!) But understanding their strengths can turn your code from a puzzle to a masterpiece. 👨‍💻🖥️

Let's code smarter, not harder! 🚀Drop a comment if you've had your share of JavaScript adventures! 🏰 hashtag#JavaScript hashtag#CodingAdventures hashtag#TechTalks


The JavaScript Jungle

Featured Posts

Redux Toolkit: an example

Mastering Object-Oriented Programming (practicing-OOP) with a Simple Task Manager in JavaScript

The Event Loop: Why JavaScript Isn’t Really Single-Threaded

Closures Explained Like You’re Five

The Weird Parts of JavaScript: Hoisting, Coercion, and More

ForEach() vs Map()