Forem: Diona Rodrigues

Why Clean Code Matters: Lessons from Uncle Bob

Diona Rodrigues — Mon, 20 Oct 2025 16:48:41 +0000

Software is everywhere. Almost every part of our lives — from banking to maps to music — depends on it. And when software fails, it can cost money, waste time, or even cause real harm. As developers, that means we carry a great responsibility — the way we write code truly matters.

Uncle Bob (Robert C. Martin), a renowned software engineer, instructor, and author, reminds us that clean code is more than just style — it’s about communication. Code is read far more often than it’s written, so clarity, consistency, and simplicity are essential.

In this article, inspired by Uncle Bob’s Clean Code lessons on YouTube and Ryan McDermott’s JavaScript adaptation (clean-code-javascript), I created a quick and practical guide, blending my notes on these timeless principles to help improve your code.

Clean Code Principles for JavaScript

Naming (for functions and variables)

Names are the first level of communication in your code. They should clearly describe what a variable or function represents or does.

Use meaningful, descriptive names that reveal intent.
A variable name should be proportional to its scope — short names for short scopes (like loops), longer names for broader contexts.
For functions, use the opposite logic: if a function is called often, keep its name short; if it’s specific or used less frequently, make it more descriptive.
Stick to a consistent vocabulary across the codebase — avoid mixing terms like “user”, “client”, and “customer” if they refer to the same entity.
Good formatting is crucial and should be applied consistently throughout the code.
Always strive to remove dead or duplicated code to keep your codebase clean.

// BAD
function currentDateFormattedBasedOnLocale(l) {
  return new Date().toLocaleDateString(l);
}

const d_ir = currentDateFormattedBasedOnLocale('en-IE');
const dtUs = currentDateFormattedBasedOnLocale('en-US');

// GOOD
function formatCurrentDate(locale) {
  return new Date().toLocaleDateString(locale);
}

const irishDate = formatCurrentDate('en-IE');
const usDate = formatCurrentDate('en-US');

Functions

Functions are the verbs of your code — they represent actions. Clean, simple, and well-defined functions make your code easy to understand and maintain.

Function names should be verbs, because functions do things.
Functions should be small and simple enough to understand quickly. If they grow too complex, extract smaller helper functions.
Avoid using more than three arguments. If needed, use an object to group related parameters and destructuring syntax (a very common pattern in React).
Avoid passing boolean arguments; they often mean the function does more than one thing.
Functions should not cause side effects — they shouldn’t modify variables or state outside their own scope. Pure functions make behavior predictable and easier to test.

// BAD
function update(u, s, notify) {
  if (notify) sendNotification(u);
  u.status = s;
  logChanges(u, s);
  calculateSomething(u, s);
  saveToDatabase(u);
}

// - Function name is vague
// - Too many responsibilities
// - Boolean argument alters behavior
// - Modifies external state (side effects)
// - Too many arguments and unclear structure

// GOOD
function updateUserStatus(user, newStatus) {
  const updatedUser = setStatus(user, newStatus);

  logUserChange(updatedUser);
  saveUser(updatedUser);
  notifyUserStatus(updatedUser);
}

/* Small helper functions */
function setStatus(user, status) {
  return { ...user, status }; // pure, no side effects
}

function logUserChange(user) {
  console.log(`User ${user.name} status changed to ${user.status}`);
}

function saveUser(user) {
  database.save(user); // isolated responsibility
}

function notifyUserStatus(user) {
  // Always clear, specific action
  sendNotification(user);
}

Comments

Comments should clarify intent, not describe what the code is doing. Code that explains itself through naming and structure is always better than one that needs constant explanation.

Avoid redundant comments that repeat what the code already states.
Use variable and function names to explain logic instead of comments.
Avoid detailed documentation (like JSDoc) unless you’re writing public APIs.
Don’t describe or refer to code that exists elsewhere — if that code changes, the comment becomes outdated.
Keep lines short, both for code and comments.
Write comments only when they truly add value — for instance, when explaining complex regex patterns or specific design decisions.

Testing

Testing ensures that your code behaves as expected and that improvements or refactors don’t break existing functionality.

Writing tests guarantees reliability and reduces the risk of regressions.
Don’t let fear of breaking something stop you from improving code — small refactors supported by tests keep systems healthy.
Developers are responsible for code quality. QA should not be expected to find issues that proper testing would have caught.
Use Test-Driven Development (TDD): write a failing test first, then implement code to make it pass, and finally refactor.
Keep tests simple and focused, covering one scenario per test.

Code Review

Code reviews help maintain quality and consistency across a team’s codebase. They are opportunities to learn, improve, and refine.

Code reviews should take almost as much time as writing the code itself.
Focus reviews on clarity, naming, maintainability, and adherence to standards.
Encourage continuous improvement — every review should leave the system cleaner and easier to maintain.

Conclusion

Clean code is a mindset and a responsibility. Clear naming, small functions, meaningful comments, thorough testing, and careful reviews make code easier to understand, maintain, and extend. Start small — refactor a function, improve a name, or write a test — and over time, these habits lead to cleaner, safer, and more professional code that benefits everyone. 😊

Essential SQL Commands: A Quick Reference Guide

Diona Rodrigues — Fri, 18 Apr 2025 19:52:59 +0000

I recently took some time to recap the SQL commands I use the most, and I decided to put together a few notes while I was at it. Nothing fancy—just a quick, practical list of the commands that come up often in my day-to-day work. Sharing them here in case they’re useful to anyone else who wants a simple reference or a refresher.

Tip: If you're looking to dive deep into MySQL, I highly recommend the MySQL Crash Course by O'Reilly — it’s the one I took and found incredibly helpful.

Query Filtering & Sorting

Commands for filtering and sorting the results of a SELECT query.

Command	Description	Example
`WHERE`	Filters the records based on a condition	`SELECT * FROM users WHERE age > 20;`
`AND / OR`	Combines multiple conditions	`SELECT * FROM users WHERE age > 20 AND name = 'John';`
`ORDER BY`	Sorts the result set	`SELECT * FROM users ORDER BY age DESC;`
`LIMIT`	Limits the number of rows returned	`SELECT * FROM users LIMIT 10;`
`BETWEEN`	Filters results within a specific range	`SELECT * FROM users WHERE age BETWEEN 20 AND 30;`
`IN`	Filters results based on a set of values	`SELECT * FROM users WHERE name IN ('John', 'Jane');`
`LIKE`	Searches for a pattern in a column	`SELECT * FROM users WHERE name LIKE 'J%';`

The * wildcard in SQL selects all columns from a table without listing them individually.

Returns all columns from the users table (e.g., id, name, email, age, etc.).

SELECT * FROM users;

In SQL, the LIKE operator is commonly used to search for a specified pattern in a column. It's especially handy when you want to filter results based on partial matches.

Wildcard	Description	Example	Matches
`%`	Matches zero or more characters	`name LIKE 'Jo%'`	John, Joanna, Joe
`_`	Matches exactly one character	`name LIKE '_an'`	Dan, Jan, Pan

Comparison Operators

Used in WHERE clauses to compare values or test specific conditions in SQL queries.

Operator	Description	Example
`=`	Equal to	`SELECT * FROM users WHERE age = 25;`
`!=` or `<>`	Not equal to	`SELECT * FROM users WHERE age != 25;`
`>`	Greater than	`SELECT * FROM users WHERE age > 30;`
`<`	Less than	`SELECT * FROM users WHERE age < 18;`
`>=`	Greater than or equal to	`SELECT * FROM users WHERE age >= 21;`
`<=`	Less than or equal to	`SELECT * FROM users WHERE age <= 60;`
`IS`	Compares with a specific value	`SELECT * FROM users WHERE is_verified IS TRUE;`
`IS NULL`	A null value	`SELECT * FROM users WHERE phone IS NULL;`
`IS NOT NULL`	A non-null value	`SELECT * FROM users WHERE phone IS NOT NULL;`
`IN`	Matches a value in a list	`SELECT * FROM users WHERE name IN ('John', 'Jane');`
`NOT IN`	Doesn’t match a value in a list	`SELECT * FROM users WHERE age NOT IN (20, 30);`
`BETWEEN`	Within a range	`SELECT * FROM users WHERE age BETWEEN 20 AND 30;`
`NOT BETWEEN`	Not within a range	`SELECT * FROM users WHERE age NOT BETWEEN 10 AND 15;`
`LIKE`	Matches a pattern	`SELECT * FROM users WHERE name LIKE 'J%';`
`NOT LIKE`	Does not match a pattern	`SELECT * FROM users WHERE name NOT LIKE 'A%';`

MySQL Data Types (Quick Reference)

A concise guide to the different data types supported in MySQL, including numeric, string, date/time, and special types.

Data Type	Description	Example
`CHAR(n)`	Fixed-length string (exact number of characters)	`CHAR(3)` can store `IRE`, `GBR`
`VARCHAR(n)`	Variable-length string, can hold up to a specified number of characters	`VARCHAR(100)` can store "Hello, World!"
`TEXT`	Stores up to 65,535 characters (~64KB), typically used for large text	"Lorem ipsum dolor sit amet..."
`TINYTEXT`	Stores up to 255 characters	"Short text"
`MEDIUMTEXT`	Stores up to 16,777,215 characters (~16MB)
`LONGTEXT`	Stores up to 4,294,967,295 characters (~4GB), used for very large text	A very large article or file
`TINYINT`	Small integers (1 byte, range: -128 to 127), often used for booleans	`TINYINT` can store `1` for true or `0` for false
`SMALLINT`	Small integers (2 bytes)	`32767`
`MEDIUMINT`	Medium-sized integers (3 bytes)	`8388607`
`INT`	Standard integer (4 bytes)	`123456789`
`BIGINT`	Large integers (8 bytes)	`123456789012345`
`BOOLEAN`	Alias for `TINYINT(1)`, used for true/false values	`true` or `false`
`DECIMAL(m,d)`	Fixed-point number with exact precision, ideal for money (`m`, total digits - `d` digits after the decimal)	`DECIMAL(5,2)` can store `999.99`
`FLOAT`	Floating-point number with a decimal point that isn’t always in the same location	`1.234` or `12.34` or `123.4.`
`DATE`	Date only (`YYYY-MM-DD`)	`2025-04-14`
`TIME`	Time only (`HH:MM:SS`)	`12:30:00`
`DATETIME`	Date and time (`YYYY-MM-DD HH:MM:SS`)	`2025-04-14 12:30:00`
`TIMESTAMP`	Stores the current date and time	`2025-04-14 12:30:00`
`YEAR`	4-digit year format	`2025`
`JSON`	Stores JSON-formatted data (structured and queryable)	`{"name": "John", "age": 30}`
`ENUM`	A string object with a predefined list of allowed values.	`ENUM('active', 'inactive', 'suspended')` only accepts one of those values
`SET`	Similar to `ENUM`, but allows multiple values from the predefined list to be selected.	`SET('English','German','Spanish')` allows we to add any or all of the languages

This example demonstrates how various MySQL data types can be used when creating a user_profile table:

CREATE TABLE user_profile (
    user_id         INT AUTO_INCREMENT PRIMARY KEY,
    username        VARCHAR(50) NOT NULL,
    email           VARCHAR(100) UNIQUE NOT NULL,
    account_status  ENUM('active', 'inactive', 'suspended') DEFAULT 'active',
    preferences     JSON,
    is_verified     BOOLEAN DEFAULT FALSE,
    signup_date     DATETIME DEFAULT CURRENT_TIMESTAMP
);

Primary & Foreign Keys

Used to uniquely identify records and establish relationships between tables in a database.

Concept	Description	Example
PRIMARY KEY	Uniquely identifies each row in a table. Only one per table. Must be unique and not null.	`user_id INT PRIMARY KEY` ensures each user has a unique ID.
FOREIGN KEY	A field that links to the PRIMARY KEY of another table, creating a relationship between them.	`user_id INT, FOREIGN KEY (user_id) REFERENCES users(user_id)`

Here’s how to define primary and foreign keys when creating tables:

CREATE TABLE users (
    user_id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL
);

CREATE TABLE orders (
    order_id INT AUTO_INCREMENT PRIMARY KEY,
    user_id INT,
    order_total DECIMAL(8,2),
    FOREIGN KEY (user_id) REFERENCES users(user_id)
);

Explanation:

The users table uses user_id as its PRIMARY KEY. It guarantees that each user in the users table is uniquely identified. This ensures data integrity and prevents duplicate users.
The orders table references user_id from the users table as a FOREIGN KEY, linking each order to a valid user. It creates a relationship between the orders and users tables.

What this gives us:

Relational structure: We can easily connect a user to all their orders.
Referential integrity: The database won’t allow an order to exist with a user_id that doesn’t exist in the users table.
Cleaner data: No more orphaned orders or accidental inconsistencies.

💡 With these keys in place, SQL joins become safer and more meaningful — because the database guarantees the connection between rows is valid.

Joins

Commands to select data from multiple tables.

Command	Description
`INNER JOIN` / `JOIN`	Returns records with matching values in both tables
`LEFT JOIN`	Returns all records from the left table, and matching records from the right table
`RIGHT JOIN`	Returns all records from the right table, and matching records from the left table
`FULL OUTER JOIN`	Returns all rows from one table and the matching rows from a second table

Example: Given two tables, one containing city names with their country codes and the other containing country names with their country codes, we can use SQL JOIN operations to select and combine data from both tables.

Cities table:

city_name	country_code
New York	US
Paris	FR
Tokyo	JP
Los Angeles	US
Sydney	AU
Dublin	IR

Countries table:

country_name	country_code
Ireland	IR
Japan	JP
Australia	AU
Italy	IT

Examples Using Different Joins:

SELECT c.city_name, co.country_name
FROM cities AS c
INNER JOIN countries AS co
ON c.country_code = co.country_code;

This uses c as the alias for cities and co for countries.

We can replace INNER JOIN in the query above with LEFT JOIN, RIGHT JOIN, or use a FULL OUTER JOIN (with a workaround in MySQL) to see different results based on the type of join.

INNER JOIN: Returns only the cities with a matching country_code in both tables.
Result: Tokyo/Japan, and Sydney/Australia and Dublin/Ireland.
LEFT JOIN: Returns all the rows from the left table (cities), and the matching rows from the right table (countries). If there is no match in the right table, the query will return NULL for the columns from the right table.
Result: All cities, but New York, Paris, and Los Angeles with NULL in the country_namecolumn.
RIGHT JOIN: Returns all rows from the right table (countries) and the matching rows from the left table (cities).
Result: Dublin, Tokyo and Sydney with their country names and NULL as the city_name for Italy.

Database Management Commands

These commands are used for creating, managing, and deleting databases and tables.

Command	Description	Example
`CREATE DATABASE`	Creates a new database	`CREATE DATABASE mydb;`
`USE`	Selects a database to use	`USE mydb;`
`DROP DATABASE`	Deletes a database	`DROP DATABASE mydb;`
`CREATE TABLE`	Creates a new table	`CREATE TABLE users (id INT, name VARCHAR(100));`
`DROP TABLE`	Deletes a table	`DROP TABLE users;`
`ALTER TABLE`	Modifies an existing table	`ALTER TABLE users ADD COLUMN age INT;`
`SHOW TABLES`	Displays a list of all tables in the current database	`SHOW TABLES;`
`DESCRIBE/EXPLAIN`	Displays structure of a table (columns, types, etc.)	`DESCRIBE users;`

Data Manipulation Commands

Commands to insert, update, delete, and select data in tables.

Command	Description	Example
`INSERT INTO`	Inserts new rows into a table	`INSERT INTO users (name, age) VALUES ('John', 25);`
`SELECT`	Retrieves data from a table	`SELECT * FROM users;`
`UPDATE`	Updates existing rows in a table	`UPDATE users SET age = 26 WHERE id = 1;`
`DELETE`	Deletes rows from a table	`DELETE FROM users WHERE id = 1;`
`TRUNCATE TABLE`	Deletes all rows in a table (without logging individual row deletions)	`TRUNCATE TABLE users;`

Inserting multiple rows at once:

INSERT INTO users (name, age)
VALUES
  ('John', 25),
  ('Jane', 30),
  ('Bob', 22),
  ('Alice', 28);

Aggregate Functions

Functions that return aggregated values such as sums, averages, counts, etc.

Command	Description	Example
`COUNT()`	Returns the number of rows that match a query	`SELECT COUNT(*) FROM users WHERE age > 20;`
`SUM()`	Returns the sum of a numeric column	`SELECT SUM(age) FROM users;`
`AVG()`	Returns the average value of a numeric column	`SELECT AVG(age) FROM users;`
`MIN()`	Returns the minimum value of a column	`SELECT MIN(age) FROM users;`
`MAX()`	Returns the maximum value of a column	`SELECT MAX(age) FROM users;`

Transactions

Commands to manage database transactions and maintain data integrity.

Command	Description	Example
`START TRANSACTION`	Begins a new transaction	`START TRANSACTION;`
`COMMIT`	Commits the current transaction	`COMMIT;`
`ROLLBACK`	Rolls back the current transaction	`ROLLBACK;`

Here’s a simple example demonstrating how transactions work:

START TRANSACTION;

UPDATE accounts SET balance = balance - 100 WHERE user_id = 1;
UPDATE accounts SET balance = balance + 100 WHERE user_id = 2;

-- If everything is fine, then run:
-- COMMIT;

-- If something goes wrong, then run:
-- ROLLBACK;

Explanation: This example simulates a money transfer between two users. The START TRANSACTION begins a transaction block. If both UPDATE statements succeed, COMMIT saves the changes. If an error occurs (e.g., user_id 2 doesn’t exist), ROLLBACK undoes both updates to maintain data integrity.

Conclusion

SQL is an incredibly powerful tool for interacting with databases, and understanding the essential commands is key to writing efficient and effective queries. By revisiting and practicing these commonly used commands, such as those for filtering, sorting, joining tables, and managing transactions, we can significantly improve our workflow and avoid common pitfalls. 😊

Redux Toolkit Advanced: Scaling Redux Toolkit for Large Applications

Diona Rodrigues — Sun, 13 Apr 2025 20:12:09 +0000

Redux Toolkit (RTK) has revolutionized state management in React applications by simplifying boilerplate and enforcing best practices. While basic usage is straightforward, scaling Redux effectively in large applications requires a deeper understanding of advanced concepts — and that’s exactly what you’ll learn in this article.

If you're new to Redux Toolkit, I covered the RTK fundamentals in a previous article, including why it's the officially recommended approach, its advantages, and how to use its main APIs to create a basic store.

In this article, we'll explore powerful Redux Toolkit techniques to streamline state management in complex projects:

Triggering updates across multiple slices using createAction.
Managing normalized state efficiently with createSlice and createEntityAdapter.
Optimizing data access with createSelector.
Enhancing reusability with custom hooks leveraging useSelector.

By mastering these techniques, you'll gain greater flexibility and maintainability in your Redux applications, ensuring they scale effectively. Let’s dive in! 🚀

Introduction to Advanced Redux Toolkit Techniques

Throughout this article, I'll walk you through key techniques using code snippets from a straightforward yet comprehensive project I built to showcase all the core features of Redux Toolkit (RTK) mentioned above. You're welcome to explore the full repository on GitHub for a deeper dive into the files.

The aim here isn’t to overwhelm you with unnecessary complexity but to demonstrate with 7 practical steps how to start designing an efficient architecture for large-scale applications using RTK. By the end of this article, you'll have valuable insights into how to scale and structure future projects with greater efficiency and clarity.

Before we start

Before diving into the techniques, I want to provide some context so you can better understand the approach we're taking and absorb the information more effectively.

Let’s imagine a page that lists airlines based on the selected region. The page includes a header with links to different regions (e.g., Europe, America, Asia). Each time a region is selected, we fetch airline data from an API based on that region.

The returned data contains a list of airlines structured like this:

// endpoint: http://localhost:5002/airlines/europe
[
  {
    "id": 101,
    "name": "Air France",
    "foundation": 1933,
    "country": {
      "id": 201,
      "name": "France"
    }
  },
  {
    "id": 102,
    "name": "Ryanair",
    "foundation": 1984,
    "country": {
      "id": 202,
      "name": "Ireland"
    }
  },
  ...
]

Check out the full JSON file here.

The goal is to fetch this data, normalize it, and update the relevant slices in our Redux store. Here's the structure of our Redux store:

store
├── airlines
├── countries
├── pointers

The airlines slice will store a list of airlines, where each entry will look like { id: 101, name: 'Air France', foundation: 1933 }, for example. The countries slice will follow a similar structure for countries { id: 201, name: France }. The pointers slice will store relationships between airlines and countries, such as { airline_id: 101, country_id: 201 }. These pointers will allow us to easily reference data from other slices.

Once all the data is in the store, we'll use RTK selectors and custom hooks to get the data to be used by the UI components.

Now we are ready! 😄

1- Handling Cross-Slice Actions with `createAction`

Sometimes, different slices need to react to the same event — like syncing or resetting shared data. With createAction, you can define generic actions that are not tied to a specific slice. These actions carry a payload containing the data to be updated or cleared, allowing any reducer to respond to them. This approach enables clean, modular cross-slice updates without creating dependencies between the slices.

// actions.js
import { createAction } from '@reduxjs/toolkit';

// `updateEntities` will be used to trigger a state update in the reducer
// It will carry the payload that contains the data to be updated in the store
export const updateEntities = createAction('UPDATE_ENTITIES');

// `cleanUpEntities` will be dispatched to clear or reset the data
// This can be useful when you want to remove data from the store, e.g., on component unmount or after a request is completed
export const cleanUpEntities = createAction('CLEAN_UP_ENTITIES');

In this example, two shared actions are created: updateEntities for syncing entity data and cleanUpEntities for clearing it. Other slices can import and respond to these actions in their reducers without depending on each other.

2- Creating Slices That Respond to Shared Actions

Now that we've defined shared actions (updateEntities and cleanUpEntities), let's see how to create slices that respond to them. We'll use createSlice and createEntityAdapter to manage normalized entity state for each slice (airlines, countries and pointers). For a deeper dive into these APIs, check out my RTK fundamentals article.

✈️ Airlines Slice

// airlinesSlice.js
import { createSlice, createEntityAdapter } from '@reduxjs/toolkit';
import { updateEntities, cleanUpEntities } from '@store/actions';

// Create an entity adapter to help manage normalized airline data
export const airlinesAdapter = createEntityAdapter();

// Generate the initial state using the adapter
const initialState = airlinesAdapter.getInitialState();

// Create the airlines slice
const airlinesSlice = createSlice({
  name: 'airlines', // Unique slice name
  initialState, // Initial normalized state
  reducers: {}, // No local reducers needed in this example

  // Use extraReducers to handle shared, cross-slice actions
  extraReducers: (builder) => {
    builder
      // When the updateEntities action is dispatched with a payload containing airline data,
      // the slice will replace the current state with the new set of airlines
      .addCase(updateEntities, (state, action) => {
        if (action.payload.airlines) {
          airlinesAdapter.setAll(state, action.payload.airlines);
        }
      })
      // When the cleanUpEntities action is dispatched (which doesn't need a payload),
      // the slice will remove all airlines from the state
      .addCase(cleanUpEntities, (state) => {
        airlinesAdapter.removeAll(state);
      });
  },
});

// Export the reducer to be used in the store
export default airlinesSlice.reducer;

In this example, the airlines slice uses extraReducers to respond to two shared actions:

updateEntities: If action.payload.airlines is present, the slice updates its entire entity collection using setAll.
cleanUpEntities: Clears all airlines from the state using removeAll.

This pattern makes it easy for multiple slices to react to a single source of truth or cleanup event.
A common use case for cleanUpEntities is when a component unmounts—for example, to clear out data that's no longer needed once a page or view is closed. This helps keep your store clean and avoids persisting stale data across views.

Countries & 📍 Pointers slices

The countries slice follows the exact same structure as airlines, simply replacing the key words. Check out the code here.

The pointers slice is nearly identical too, but instead of calling setAll, it uses setOne — since it's likely managing a single pointer entity rather than a list:

if (action.payload.pointers) {
  pointersAdapter.setOne(state, action.payload.pointers);
}

The pointers slice works a bit differently (code here). Instead of receiving an array of pointer entities, it expects them to be grouped by region, like so:

const pointers = {
  id: region,
  mapping: [
    { airline_id: 101, country_id: 201 },
    ...
  ],
};

In this structure, the region name becomes the entity ID, and each entity includes a mapping property containing the list of pointers for that region. This design allows the store to hold pointers for multiple regions at the same time, offering greater flexibility when managing localized data.

Despite this small variation, the slice still integrates smoothly with the shared action system — highlighting how adaptable this pattern is for handling cross-slice updates with diverse data shapes.

3- Setting Up the Store with Our Slices

Now that we have our individual slices defined (airlines, countries, and pointers), the next step is to combine them into a single Redux store. This is done using configureStore from Redux Toolkit.

By registering each slice reducer under its own key, we create a modular structure where each slice manages its own section of the state. Here's how the store is set up:

// store.js
import { configureStore } from '@reduxjs/toolkit';

// Import slice reducers
import airlinesReducer from '@features/airlines/airlinesSlice';
import countriesReducer from '@features/countries/countriesSlice';
import pointersReducer from '@features/pointers/pointersSlice';

// Create and configure the Redux store
export const store = configureStore({
  reducer: {
    // Each slice manages its own section of the state
    airlines: airlinesReducer,
    countries: countriesReducer,
    pointers: pointersReducer,
  },
});

Connecting the Redux Store to React

Note: To make the Redux store available throughout your React app, wrap your root component with the Provider component from react-redux. This allows any component in the tree to access the store using hooks like useSelector and useDispatch that we will see soon.

//...
import { Provider } from 'react-redux';
import { store } from '@store/store';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Provider store={store}>
      <Router>
        <App />
      </Router>
    </Provider>
  </StrictMode>
);

4- Sending Data to the Store with dispatch and Shared Actions

Now that our Redux setup is in place, let’s see how to send data to the store using a real-world example. In this case, we have a component called Airlines that:

Retrieves a region from the URL using useParams.
Fetches airline data based on that region.
Normalizes the response using a custom function called normalizeData().
Dispatches the updateEntities action to populate the store.
Cleans up the state on unmount using cleanUpEntities.

Here’s a simplified version of how it works (full code here):

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { useParams } from 'react-router-dom';

import { updateEntities, cleanUpEntities } from '@store/actions';
import { normalizeData } from '@utils/normalizer';

export default function Airports() {
  const dispatch = useDispatch();
  const { region } = useParams();

  useEffect(() => {
    // Fetch data based on the region
    fetch(`http://localhost:5002/airlines/${region}`)
      .then((res) => res.json())
      .then((data) => {
        // Normalize and dispatch it to the store
        const normalizedData = normalizeData(data, region);
        dispatch(updateEntities(normalizedData));
      });

    // Cleanup the store when the component unmounts
    return () => dispatch(cleanUpEntities());
  }, [dispatch, region]);

  return <div>{/* render something */}</div>;
}

✨ Quick Note on the normalizeData Function:

When the API returns data, it usually comes as a nested list of airlines, like this:

// endpoint: http://localhost:5002/airlines/europe
[
  {
    "id": 101,
    "name": "Air France",
    "foundation": 1933,
    "country": {
      "id": 201,
      "name": "France"
    }
  },
  ...
]

To better structure this for Redux, we normalize the response into a flat format using normalizeData() (code here):

{
  airlines: [
    { id: 101, name: 'Air France', foundation: 1933 },
    ...
  ],
  countries: [
    { id: 201, name: 'France' },
    ...
  ],
  pointers: {
    id: 'europe',
    mapping: [
      { airline_id: 101, country_id: 201 },
      ...
    ],
  },
}

This normalized object is then passed as the payload of our updateEntities action. Thanks to the way each slice is set up, they will automatically update their state with the relevant portion of the payload. Pretty cool, right?

5- Optimizing State Access with Selectors

Selectors allow us to efficiently retrieve specific pieces of data from the Redux store, minimizing unnecessary re-renders by memoizing results. This optimization improves both performance and maintainability of the codebase.

In this section, we'll explore how selectors are defined and used, with an example focused on the airlines feature.

Creating the Selectors

createSelector from Redux Toolkit creates memoized selectors that only recompute when their inputs change. This helps avoid unnecessary recalculations and re-renders, improving performance, especially with complex or nested state.

Airlines selectors

// airlinesSelectors.js
import { createSelector } from '@reduxjs/toolkit';
import { airlinesAdapter } from './airlinesSlice';

// Get the default selector from the airlines slice
const { selectById: selectAirlinesById } = airlinesAdapter.getSelectors(
  (state) => state.airlines
);

// Create a selector to retrieve an airline by its ID
export const selectAirline = (state, airlineId) =>
  selectAirlinesById(state, airlineId);

// Use createSelector to transform the data (e.g., extracting the name of the airline)
export const selectAirlineName = createSelector(
  [selectAirline],
  (airline) => airline?.name
);

// Extract the foundation of the airline
export const selectAirlineFoundation = createSelector(
  [selectAirline],
  (airline) => airline?.foundation
);

selectAirline: Retrieves an airline by its unique ID from the store.
selectAirlineName: Memoized selector that returns the airline's name and prevents unnecessary re-renders.
selectAirlineFoundation: Memoized selector that returns the foundation year and avoids re-renders when unrelated state changes.

Countries selectors

Selectors for countries are very similar to the ones we created for airlines. You can check them out here for reference.

Pointers selectors

For the pointers feature, we'll combine multiple selectors and transform data as part of the selection process. This enables us to retrieve and format data efficiently. Here's an example:

// pointersSelectors.js
import { createSelector } from '@reduxjs/toolkit';
import { pointersAdapter } from './pointersSlice';
import { selectAirlineName } from '@features/airlines/airlinesSelectors';

// Get the basic selector from pointersSlice
const { selectById: selectPointerById } = pointersAdapter.getSelectors(
  (state) => state.pointers
);

// Select pointers based on the region (pointersId)
export const selectPointers = (state, pointersId) =>
  selectPointerById(state, pointersId)?.mapping;

// Select pointers sorted alphabetically by airline name
export const selectPointersByAlphabeticalOrder = createSelector(
  [(state, pointersId) => selectPointers(state, pointersId), (state) => state],
  (pointers, state) => {
    if (!pointers) return [];

    return [...pointers].sort((a, b) => {
      const nameA = selectAirlineName(state, a.airline_id) ?? '';
      const nameB = selectAirlineName(state, b.airline_id) ?? '';
      return nameA.localeCompare(nameB);
    });
  }
);

In this example, we are combining two selectors:

selectPointers: This selector retrieves the list of pointers based on the region (identified by pointersId).
selectPointersByAlphabeticalOrder: This custom selector sorts the pointers alphabetically by airline name, making the data more useful for display purposes.

By using createSelector, we not only combine and format the data but also ensure performance optimization by memoizing the results. This prevents unnecessary recalculations and improves the efficiency of the application.

6- Custom Hooks for Redux State

As your application grows, accessing state directly in components using useSelector can lead to repetitive and hard-to-read code. To keep components clean, focused, and maintainable, we can use custom hooks to encapsulate state access logic. This separation of concerns allows your components to concentrate on rendering and interaction, rather than worrying about how data is retrieved from the store.

For example, instead of writing this in every component:

const airlineName = useSelector((state) => selectAirlineName(state, airlineId));

We can define a simple custom hook:

export const useAirlineName = (airlineId) =>
  useSelector((state) => selectAirlineName(state, airlineId));

Then use it in a component like so:

const airlineName = useAirlineName(airlineId);

This keeps components cleaner, more concise, and easier to test.

Airlines custom hooks

// useAirlines.js
import { useSelector } from 'react-redux';
import {
  selectAirlineName,
  selectAirlineFoundation,
} from '@features/airlines/airlinesSelectors';

// Select airline name
export const useAirlineName = (airlineId) =>
  useSelector((state) => selectAirlineName(state, airlineId));

// Select airline foundation
export const useAirlineFoundation = (airlineId) =>
  useSelector((state) => selectAirlineFoundation(state, airlineId));

Countries custom hooks

// useCountries.js
import { useSelector } from 'react-redux';
import { selectCountryName } from '@features/countries/countriesSelectors';

// Select country name
export const useCountryName = (countryId) =>
  useSelector((state) => selectCountryName(state, countryId));

Pointers custom hooks

// usePointers.js
import { useSelector } from 'react-redux';
import { selectPointersByAlphabeticalOrder } from '@features/pointers/pointersSelectors';

// Select all pointers by Alphabetical order
export const usePointersByAlphabeticalOrder = (pointersId) =>
  useSelector((state) => selectPointersByAlphabeticalOrder(state, pointersId));

Beyond Simple Hooks

While the examples above show simple wrappers around selectors, custom hooks can be more powerful:

Combine multiple selectors
Include conditional logic
Provide computed or derived values
Handle side effects or local state in addition to global Redux state

By building these abstractions into hooks, we create consistent, reusable patterns across the app that improve maintainability and scalability.

7- Using Custom Hooks to Display Data in Components

Now that we've created custom hooks to access the Redux state, we can use them to select and display the data cleanly in our UI components. Below are two components:

Airlines: fetches and normalizes the data
AirlineCard: consumes the data using custom hooks and renders it

The Airlines component below is a simplified version of a more complete one available in my GitHub repository. This version is meant to demonstrate how we can retrieve the pointers using a custom hook and pass their associated IDs down to the AirlineCard component. Each AirlineCard then uses these IDs to select and display specific pieces of data from the Redux store through dedicated custom hooks.

// Airlines.jsx
import { useParams } from 'react-router-dom';
import { usePointersByAlphabeticalOrder } from '@hooks/usePointers';
import AirlineCard from '@components/AirlineCard';

export default function Airlines() {
  const { region } = useParams();
  // Get the pointers by using the region as ID
  const pointers = usePointersByAlphabeticalOrder(region);

  // If there are no pointers (empty array), return null
  if (!pointers?.length) return null;

  return (
    <>
      <h1>{region}</h1>
      {/* Display an AirlineCard for each pointers entity ({ airline_id: 101, country_id: 201 }) */}
      {pointers.map(({ airline_id, country_id }) => (
        <AirlineCard
          key={`${airline_id}/${country_id}`}
          airlineId={airline_id}
          countryId={country_id}
        />
      ))}
    </>
  );
}

Next, we have the AirlineCard component:

// AirlineCard.js
import { useAirlineName, useAirlineFoundation } from '@hooks/useAirlines';
import { useCountryName } from '@hooks/useCountries';

export default function AirlineCard({ airlineId, countryId }) {
  const airlineName = useAirlineName(airlineId);
  const airlineFoundation = useAirlineFoundation(airlineId);
  const countryName = useCountryName(countryId);

  return (
    <>
      <h2>{airlineName}</h2>
      <div>
        <ul>
          <li>
            <strong>Foundation:</strong> {airlineFoundation}
          </li>
          <li>
            <strong>Country:</strong> {countryName}
          </li>
        </ul>
      </div>
    </>
  );
}

In this setup, the Airlines component retrieves the data for airlines by calling a custom hook (usePointersByAlphabeticalOrder) and passes the necessary IDs (such as airlineId and countryId) down to the AirlineCard. Each AirlineCard then uses custom hooks like useAirlineName, useAirlineFoundation, and useCountryName to pull the corresponding data from the Redux store.

This method helps to keep the components clean and ensures that we only fetch the necessary data in a way that is easy to manage and maintain.

Conclusion: 🚀 Wrapping Up Advanced Redux Toolkit Techniques

In this article, we've explored advanced Redux Toolkit techniques that enable you to scale and optimize state management in large React applications. By leveraging features like createAction, createSlice, createEntityAdapter, createSelector, and custom hooks, you can manage complex state efficiently, improve performance, and maintain modularity in your projects.

As your application grows, these techniques will help you streamline your state management, making it easier to manage cross-slice actions, normalize data, optimize data access, and create reusable hooks. Happy coding, and enjoy scaling your projects! 🙌🎉

Redux Toolkit Fundamentals: Simplifying State Management

Diona Rodrigues — Tue, 01 Apr 2025 09:38:02 +0000

If you have ever used Redux, you probably remember how complicated it could get—setting up the store, writing actions and reducers, and making sure everything stayed immutable. It required a lot of upfront decisions, which made state management feel overwhelming. Luckily, Redux Toolkit (RTK) changes the game! It streamlines setup, enforces best practices, and comes with built-in tools like Immer for seamless immutable updates, Redux Thunk for handling async logic, and automatic store configuration. With RTK, managing state is easier, cleaner, and way less frustrating.

In this article, we'll cover Redux Toolkit fundamentals—its core concepts (like configureStore and createSlice), how it works, and why it's the standard for Redux development. Whether you're new or experienced, RTK is the best approach to Redux development. Check out this next article called Redux Toolkit Advanced: Scaling Redux Toolkit for Large Applications, where we'll dive into advanced topics like shared actions across slices, combined selectors and custom hooks.

What is Redux, BTW?

Before diving into Redux Toolkit, let’s quickly revisit Redux itself.

Redux is a state management library that helps us manage global state in JavaScript applications, especially but not only in React. It uses a centralised state management pattern, ensuring structured data flow and predictable state updates.

At its core, Redux is built around three main principles:

Single Source of Truth: The global application state is stored in a single Redux store, making it easier to manage, debug, and track state changes throughout the app.
State is Read-Only: The state cannot be modified directly. Instead, we dispatch actions to describe changes, ensuring that updates always follow a predictable and traceable flow.
Changes are Made with Pure Functions: Instead of mutating state directly, reducers process actions and return a new state, ensuring predictable updates.

While Redux provides simple, but powerful state management, it requires a lot of boilerplate code and manual setup—which is where Redux Toolkit comes in to simplify things. Let’s see how! 🚀

Introducing Redux Toolkit (RTK)

Let’s briefly summarise key RTK concepts before exploring them in practice.

Redux Toolkit (RTK) is the official, recommended approach to writing Redux logic, designed to simplify development and minimize boilerplate.

In this article, we’ll dive into three basic core RTK concepts and use them to create a simple, functional ToDo list in React.

configureStore: A wrapper around Redux’s createStore that simplifies store setup. It automatically combines slice reducers, includes redux-thunk by default (for asynchronous logic), enables the Redux DevTools Extension, and allows custom middleware.
createSlice: A higher-level abstraction that combines reducers and actions into a single API. It takes a slice name, an initial state, and an object of reducer functions, automatically generating the corresponding reducer, action creators, and action types.
createEntityAdapter: normalizes data, generates reusable reducers, and improves performance by simplifying CRUD operations.

These are the main RTK concepts we’ll be using in this article as we explore how to implement them in practice. They simplify Redux development a lot and help manage state more efficiently. If you’d like to explore additional features, you can check the complete RTK API list in the official Redux Toolkit documentation.

Using Redux Toolkit in practice: Building a simple To-Do list

In this section, we'll explore how to use Redux Toolkit (RTK) in a practical scenario by building a simple to-do list application in React. From setting up a Redux store with configureStore to creating slices with createSlice and managing state efficiently, this guide will walk you through the key concepts of RTK. We'll also cover how to use createEntityAdapter for optimized data handling and demonstrate how to dispatch actions and select state in a React app, all while keeping the code clean and minimal. 🚀

We'll follow this project structure:

📂 src
├── 📄 store.js
├── 📄 todoSlice.js
├── 📄 App.jsx
├── 📂 components
├────── 📂 TodoList
├───────── 📄 index.jsx
├───────── 📄 styles.css

Chek the this repo with all the files.

1. Install Dependencies

First, install the necessary dependencies:

npm install @reduxjs/toolkit react-redux

2. Setting Up the Redux Store

Before we create the reducers, we need to set up our Redux store using configureStore from Redux Toolkit. Here, we define a todos slice in the store, which will be managed by todoReducer. This reducer will be created in the next step to handle actions like adding, toggling, and removing to-dos. Additionally, the slice name (todos) will be visible in the Redux DevTools, making it easy to track state changes during development.

// store.js
import { configureStore } from '@reduxjs/toolkit';
import todoReducer from './todoSlice';

export const store = configureStore({
  reducer: {
    todos: todoReducer,
  },
});

3. Creating the To-Do Slice (Reducers & Actions)

In this step, we'll define the to-do slice using createSlice, which generates reducers and actions for managing our to-do list. We'll start with a simple array-based approach, where each to-do item is stored as an object with id, text, and completed properties. The reducers will handle adding, toggling, and removing to-dos.

Later, we'll improve this implementation by using createEntityAdapter, which helps structure the state more efficiently by normalizing the data and generating optimized selectors and reducers. For now, we'll keep things simple and manage the list manually.

// todoSlice.js
import { createSlice } from '@reduxjs/toolkit';

// Initial state is an empty array, which will hold the to-do items
const initialState = [];

const todoSlice = createSlice({
  // The name of the slice that will appear in the Redux DevTools
  name: 'todos',

  // The initial state of the slice
  initialState,

  // Reducers define how the state is updated based on dispatched actions
  reducers: {
    // Adds a new to-do to the list with a unique id, text, and a completed status (defaulted to false)
    addTodo: (state, action) => {
      state.push({
        id: Date.now(), // Use the current timestamp as a unique id
        text: action.payload, // The text for the new to-do item
        completed: false, // New to-dos are not completed by default
      });
    },

    // Toggles the completed status of a to-do item when it's clicked
    toggleTodo: (state, action) => {
      const todo = state.find((todo) => todo.id === action.payload); // Find the to-do by its id
      if (todo) {
        todo.completed = !todo.completed; // Toggle the completed status
      }
    },

    // Removes a to-do item from the list by its id
    removeTodo: (state, action) => {
      return state.filter((todo) => todo.id !== action.payload); // Filter out the to-do to be removed
    },
  },
});

// Export the actions generated by createSlice
export const { addTodo, toggleTodo, removeTodo } = todoSlice.actions;

// Selector to get all to-dos from the store state
export const selectTodos = (state) => state.todos;

// Export the reducer function, which will be used in the store setup
export default todoSlice.reducer;

4. Building the To-Do List UI

In this step, we’ll create the user interface (UI) for our to-do list application using React. The UI will allow users to:

Add new to-dos by typing into an input field and clicking the "Add" button.
Toggle the completion status of a to-do by clicking on the task itself, which will mark it as completed or incomplete.
Remove to-dos by clicking the delete (❌) button next to each item.

We'll use React hooks like useState for local state and useDispatch and useSelector from react-redux to interact with the Redux store. The UI will display a list of to-dos, and we'll conditionally apply styles to indicate whether a task is completed or not. The layout will be simple, and you can check the basic styling here.

Let’s get started by building the TodoList component!

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, toggleTodo, removeTodo, selectTodos } from '../../todoSlice';
import './styles.css'; // Import the CSS file

const TodoList = () => {
  const [input, setInput] = useState(''); // Local state for the input field
  const dispatch = useDispatch(); // Dispatch to trigger Redux actions
  const todos = useSelector(selectTodos); // Select todos from the Redux store

  // Handle adding a new todo
  const handleAddTodo = () => {
    if (input.trim()) {
      // Check if input is not just whitespace
      dispatch(addTodo(input.trim())); // Dispatch addTodo action
      setInput(''); // Reset input field after adding the todo
    }
  };

  // Handle toggling the completion status of a todo
  const handleToggleTodo = (id) => {
    dispatch(toggleTodo(id)); // Dispatch toggleTodo action to mark as completed or not
  };

  return (
    <div className="todo-container">
      <h1 className="todo-title">To-Do List</h1>

      {/* Input field and Add button */}
      <div className="input-container">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)} // Update input state on change
          className="todo-input"
          placeholder="Add a new task..."
        />
        <button onClick={handleAddTodo} className="add-button">
          Add
        </button>
      </div>

      {/* List of todos */}
      <ul className="todo-list">
        {todos.map((todo) => (
          <li
            key={todo.id}
            className={`todo-item ${todo.completed ? 'completed' : ''}`} // Add 'completed' class if the task is completed
          >
            {/* Checkbox to mark a task as completed or not */}
            <label style={{ display: 'flex', alignItems: 'center' }}>
              <input
                type="checkbox"
                checked={todo.completed} // Checkbox checked state based on todo's completed status
                onChange={() => handleToggleTodo(todo.id)} // Handle checkbox toggle
                className="todo-checkbox"
              />
              <span
                style={{
                  textDecoration: todo.completed ? 'line-through' : 'none',
                }} // Strike-through text if completed
              >
                {todo.text}
              </span>
            </label>

            {/* Remove button to delete a todo */}
            <button
              onClick={() => dispatch(removeTodo(todo.id))} // Dispatch removeTodo action
              className="remove-button"
            >
              ❌
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

Adicional explanations:

By using useSelector, the component automatically subscribes to the Redux store and re-renders whenever the state it depends on (the list of todos) changes. Similarly, useDispatch provides the function needed to send actions to update the state in the store.

The selectTodos function is a selector that returns the list of todos from the store, which is then used to display the tasks.

Using `createEntityAdapter` for efficient state management

When managing collections of data in Redux, handling updates, deletions, and retrievals efficiently can become complex. Redux Toolkit’s createEntityAdapter simplifies this process by normalizing data and providing optimized selectors and reducers out of the box.

Why Use `createEntityAdapter`?

Normalized State – Stores data in an object with IDs as keys instead of an array, making lookups and updates more efficient.
Prebuilt Reducers – Includes addOne, addMany, removeOne, updateOne, and more, reducing boilerplate code.
Auto-Generated Selectors – Provides optimized selectors (selectAll, selectById, etc.) to retrieve entities easily.

Enhancing `todoSlice.js` with `createEntityAdapter`

Now, we'll see how to improve the todoSlice.js we previously created by using createEntityAdapter. This approach will make our Redux state management more efficient, reducing boilerplate code and improving performance.

import { createSlice, createEntityAdapter } from '@reduxjs/toolkit';

// Create an adapter for the to-do list
const todosAdapter = createEntityAdapter();

// Define the initial state using the adapter's getInitialState
const initialState = todosAdapter.getInitialState();

// Create the slice
const todoSlice = createSlice({
  name: 'todos', // The slice name will appear in Redux DevTools
  initialState,
  reducers: {
    // Adds a new to-do using the adapter's addOne function
    addTodo: (state, action) => {
      todosAdapter.addOne(state, {
        id: Date.now(), // Generate a unique ID based on timestamp
        text: action.payload, // The text of the to-do
        completed: false, // Default to not completed
      });
    },

    // Toggles the completion status of a to-do item
    toggleTodo: (state, action) => {
      const todo = state.entities[action.payload]; // Access by ID
      if (todo) {
        todo.completed = !todo.completed; // Toggle completed status
      }
    },

    // Removes a to-do using the adapter's removeOne function
    removeTodo: (state, action) => {
      todosAdapter.removeOne(state, action.payload);
    },
  },
});

// Export actions
export const { addTodo, toggleTodo, removeTodo } = todoSlice.actions;

// Generate selectors using the adapter
export const { selectAll: selectTodos, selectById: selectTodoById } =
  todosAdapter.getSelectors((state) => state.todos);

// Export the reducer for the store setup
export default todoSlice.reducer;

Redux slice data without Adapter:

const state = {
  todos: [
    {
      id: 1,
      text: 'Buy groceries',
      completed: false,
    },
    {
      id: 2,
      text: 'Finish project',
      completed: true,
    },
    {
      id: 3,
      text: 'Call mom',
      completed: false,
    },
  ],
};

The todos array stores objects, making it necessary to iterate over the array to find or modify items. To find a specific todo, we need to use .find() or .filter().

Updates require manually mapping through the array and modifying the correct item.

Redux slice data with Adapter:

const state = {
  todos: {
    ids: [1, 2, 3], // Stores the order of IDs
    entities: {
      1: { id: 1, text: 'Buy groceries', completed: false },
      2: { id: 2, text: 'Finish project', completed: true },
      3: { id: 3, text: 'Call mom', completed: false },
    },
  },
};

Cleaner Code: Removes redundant logic.
Better Performance: Direct lookups instead of filtering through an array.
Easier Maintenance: Uses built-in Redux Toolkit methods.

Key Differences & Benefits of `createEntityAdapter`

Feature	Without `createEntityAdapter`	With `createEntityAdapter`
State Structure	Array of objects	Normalized with `entities`
Lookup Efficiency	`O(n)` (Loop through array)	`O(1)` (Direct access via `entities`)
Adding a Todo	`push` new object	`addOne` method
Toggling Todo	Find by `id` then update	Directly modify `entities[id]`
Removing Todo	Filter out by `id`	`removeOne` method
Selectors	Manually written	Auto-generated (`selectAll`, `selectById`)

References

Conclusion

Redux Toolkit has transformed state management by simplifying Redux development and reducing boilerplate. With powerful utilities like configureStore, createSlice, and createEntityAdapter, RTK enforces best practices while making state handling more efficient.

In this article, we explored the core concepts of Redux Toolkit and built a to-do list to demonstrate its benefits. We also compared manual state management with createEntityAdapter, highlighting how it normalizes data, improves performance, and simplifies CRUD operations.

By adopting Redux Toolkit, developers can write cleaner, more maintainable Redux code with minimal setup. If you're still managing state the old way, now is the perfect time to embrace RTK for a better development experience! 😃

See you in the next article!

NVM Basics & Bash Aliases: Simplify Your Development Workflow

Diona Rodrigues — Mon, 24 Feb 2025 21:07:58 +0000

As developers, managing different versions of Node.js and streamlining terminal commands are essential for productivity. Tools like Node Version Manager (NVM) and Bash Aliases can make a big difference, especially when working on multiple projects with different dependencies, like varying Node or React versions.

In this article, we’ll explore how NVM helps you manage Node.js versions for different projects and how Bash Aliases can simplify repetitive commands, making your development workflow faster and more efficient. Let’s dive in!

NVM (Node Version Manager)

NVM (Node Version Manager) is a crucial tool for managing multiple versions of Node.js, especially when working on projects that require different Node or React versions. For instance, if one project needs an older React version while another uses a newer one, NVM lets you easily switch between versions to maintain compatibility without interfering with other projects. This flexibility ensures that each project runs with the right version of Node.js, eliminating version conflicts and improving your workflow.

How to install NVM

You can install NVM first using a script or package manager (like curl or wget). Open your terminal and run the following command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

This will download and install NVM. After installation, close and reopen your terminal.

Install Node.js via NVM

After installing NVM, you can use it to install different versions of Node.js with commands like nvm install <version>:

nvm install 22

Basic NVM commands

Use a specific Node.js Version

nvm use 22

List all installed Node.js versions

nvm ls

Set a default Node.js version:

nvm alias default 22

With these commands, you can manage and switch between different versions of Node.js for various projects. Learn more in the NVM Github repository.

Bash Aliases

Bash Aliases are shorthand commands that allow you to simplify long or complex commands. By creating aliases, you can save time and effort when running frequently used commands, whether it's for navigating to project directories or executing npm scripts.

Creating Bash Aliases

To create custom aliases, you'll need to modify your Bash configuration file. Here's how to do it:

Edit the Bash Configuration File

Open your ~/.bashrc file using your preferred text editor (we’ll use nano here):

nano ~/.bashrc

Add Aliases

In the .bashrc file, add the following alias syntax to define your custom commands.

alias <alias_name>="<command>"

Here's an example of Bash aliases that you can use to switch between different Node versions for different React project paths.

# React Project 1 (Requires Node 16.x)
alias react_project_1="cd ~/Documents/develop/project-1 && nvm use 16 && npm start"

# React Project 2 (Requires Node 20.x)
alias react_project_2="cd ~/Documents/develop/project-2 && nvm use 20 && npm start"

So, the aliases above, mean:

Change the current directory to the project folder, switch to Node.js version 16 (or 20, depending on the alias), and start the React development server.

Reload the Bash File

To activate the aliases, after saving the file, you'll need to reload the .bashrc file by running:

source ~/.bashrc

Using the Bash aliases

Use the aliases just like a regular command:

react_project_1

Conclusion

By utilizing NVM and Bash Aliases, you can significantly simplify your development workflow. NVM allows you to manage different versions of Node.js for various projects, while Bash Aliases save you time by turning long commands into easy-to-remember shortcuts.

Together, these tools can help you focus more on development and less on managing environments or repeatedly typing out long commands.

For further reading, check out these helpful resources:

By implementing these tools, you'll be able to optimize your development environment and work more efficiently. Happy coding! 😊

From useEffect to React Query: Modernizing your data management in react

Diona Rodrigues — Mon, 18 Nov 2024 13:16:58 +0000

In the modern web development landscape, building fast, responsive applications that efficiently manage server-side data is more crucial than ever. Traditional methods of fetching data in React, especially using useEffect, can often lead to complex state management, repetitive code, and performance issues. With React Query, developers can take advantage of features like automatic caching, background fetching, and built-in mutation support, all while minimising boilerplate code.

In this article, we'll explore the core concepts of React Query, demonstrate how to integrate it into our projects, and highlight its powerful features that can significantly improve your development workflow. Get ready to transform the way you fetch, cache, and synchronise data in your React applications!

Why should we stop fetching data using React Effects

While using React's useEffect for data fetching is perfectly valid, there are several reasons to consider moving away from it in favor of a dedicated data fetching library like React Query (even the React documentation suggests using React Query for data fetching).

Some downsides of using Effects for data fetching:

Performance Issues: “network waterfalls” and unnecessary re-fetching are some of the common issues when using React useEffect and can lead to a very bad user experience.
Lack of Built-in Caching: useEffect does not provide caching out of the box, which causes repeated network requests and complex solutions to manage it.
Complexity in State Management: managing loading, error, and data states manually with useEffect can lead to cumbersome and error-prone code, especially as the application scales.
Effects don’t run on server: data will may not be available when the component initially renders.

How React Query works

React Query is a powerful library designed to simplify data fetching and state management in React applications. Here’s a breakdown of how React Query works:

1. Querying Data

useQuery hook: The core of React Query is the useQuery hook. This hook allows you to fetch data from a server and automatically manage its state (loading, error, data…).
Query key: Each query is identified by a unique key (one or more strings in an array). This key helps React Query cache and manage the data efficiently.

2. Caching

Automatic caching: When data is fetched, React Query caches it. If the same query is made again, it retrieves data from the cache instead of making a new network request.
Stale data management: You can define how long data should be considered fresh (not stale). After this period, React Query will refetch the data in the background.

3. Background Refetching

React Query automatically refetches data in several scenarios to keep the data fresh and in sync. Here are the main situations when this happens:

Mounting of components: When a component mounts, if the data is considered stale.
Window focus: Whenever the window regains focus, such as when a user switches between tabs or windows and returns to the one containing your application.
Network reconnection: If the network connection is lost and later restored.

4. Data Mutations

useMutation Hook: it refers to the process of creating, updating, or deleting data on the server. Unlike querying, which retrieves data, useMutation is used to modify data and manage side effects associated with it.
Optimistic updates: when a user performs an action that will mutate data, the UI is updated right away to reflect the anticipated outcome of that action, enhancing user experience.

5. Query Invalidation

React Query allows you to mark a cached query as "stale" so that it will be refetched the next time it's accessed. This is essential for ensuring that the UI reflects the most up-to-date data from the server after certain actions, such as mutations or user interactions.

6. Automatic Garbage Collection

React Query automatically removes queries from its cache when they are no longer being used and have been inactive for a certain period. This process helps prevent memory leaks and ensures that only relevant data stays in the cache.

7. DevTools

React Query DevTools is an optional, user-friendly tool for React Query that helps us, developers, debug and monitor queries, mutations, and cache state. It provides a visual interface to inspect the details of our queries and see how React Query manages their lifecycle.

8. Server-Side Rendering (SSR)

React Query supports Server-Side Rendering (SSR), which helps in pre-fetching data on the server before sending it to the client. This makes initial page loads faster and can improve SEO by serving a fully rendered page to search engines.

How to implement React Query

Here’s a step-by-step guide on how to use React Query to manage server data fetching, caching, updating, and synchronization in a React app.

Step 1: Install React Query

First, add React Query to your project:

npm install @tanstack/react-query

Step 2: Setup `QueryClientProvider`

To configure React Query, wrap your app in a QueryClientProvider. This provider uses a QueryClient instance, which manages caching, background fetching, and updates.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
    </QueryClientProvider>
  );
}

Step 3: Fetch Data with `useQuery`

The useQuery hook fetches data from an API, automatically caching it and handling states like loading and errors.

import { useQuery } from '@tanstack/react-query';

function YourComponent() {
  const { data, error, isLoading } = useQuery(['todos'], fetchTodos);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      {data.map((todo) => (
        <p key={todo.id}>{todo.title}</p>
      ))}
    </div>
  );
}

// Sample fetch function
const fetchTodos = async () => {
  const response = await fetch('/api/todos');
  return response.json();
};

Key (['todos']): Each useQuery requires a unique key to identify and cache data.
Query Function (fetchTodos): This async function fetches the data you need from an API.

Step 4: Handle Data Mutations with `useMutation`

The useMutation hook is used to create, update, or delete data. Once a mutation is successful, you can use query invalidation to refetch relevant data and keep your app’s state up to date.

import { useMutation, useQueryClient } from '@tanstack/react-query';

function TodoAdder() {
  const queryClient = useQueryClient();
  const addTodoMutation = useMutation(addTodo, {
    onSuccess: () => {
      queryClient.invalidateQueries(['todos']);
    },
  });

  return (
    <button onClick={() => addTodoMutation.mutate({ title: 'New Todo' })}>
      Add Todo
    </button>
  );
}

const addTodo = async (newTodo) => {
  const response = await fetch('/api/todos', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newTodo),
  });
  return response.json();
};

Mutation Function (addTodo): This async function modifies the server state.
onSuccess: After a mutation, this callback invalidates the ['todos'] query, refetching and updating the data to show the newly added todo.

Step 5: Optional DevTools for Debugging

React Query DevTools can help you monitor queries, cache status, and more during development:

npm install @tanstack/react-query-devtools

Then, add <ReactQueryDevtools /> to your app:

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourComponent />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

Conclusion

Replacing useEffect with React Query for data fetching and side effects is a great recommendation for building modern React applications.

React Query transforms the way you handle server-side data in React apps, providing a more declarative approach that simplifies complex state management. By leveraging its powerful features like caching, background synchronization, and query invalidation, you can create highly responsive and performant applications. And last, but not least, integrating React Query DevTools makes it easy to monitor and debug, ensuring that your app’s data flow is smooth and transparent.

Whether you’re building a simple single-page app or a complex data-heavy application, React Query empowers you to build faster, smarter, and more user-friendly apps with less effort.

Web accessibility, how to design web pages for everyone

Diona Rodrigues — Sun, 09 Jun 2024 15:18:43 +0000

As developers, how can we make at least the web more accessible for all? That’s the main question of this article and here we’ll explore some ideas to make our websites more inclusive, a place where people with disabilities can also use the internet to learn something new, acquire some different skill, buy products and many other actions that most of us do in our daily digital life and maybe have never thought about it before.

“Accessibility: It’s About People” - W3C

Did you know that 1.3 billion people (16% of the world’s population) are estimated to live with some form of disability nowadays and that they face many issues related not only with stigma and discrimination, but also exclusion from education and employment? Information from the World Health Organization (WHO) report on disability.

What is accessibility when it comes to web

In short, web accessibility, more specifically, is about diversity, equity and inclusion: everyone can perceive, understand, navigate and interact with the web no matter what their ability or circumstances.

Some examples of disabilities that affect access to the web are:

Visual: includes people with blindness, low-level vision, and color blindness. Following WHO reports, 2.2 billion people in the world have a near or distance vision impairment.
Auditory: deaf and hard-of-hearing (DHH) people. The WHO states that 5% of the world's population needs rehabilitation to deal with their disabling hearing loss.
Cognitive: refers to a broad range of disabilities that include intellectual disability, dyslexia, autism, brain injury, stroke, Alzheimer's disease…
Speech: difficulty in a person's ability to produce sounds that create words.
Mobility: difficulty performing movements ranging from walking to manipulating objects with your hands.

It is important to note that some disabilities are permanent, but many of them are also temporary, such as not being able to use your smartphone with your hands while driving, so voice command solutions can be useful here, for example; or cannot hear sound at the moment, then subtitles in videos can help the user to better understand the content.

“Web accessibility is about creating web content, design, and tools that can be used by everyone regardless of ability.” - Monsido

How to improve user experience with web accessibility

Accessibility standards, in addition to WCAG (Web Content Accessibility Guidelines provided by W3C), also involve local/country laws and policies, as well as the type of product and industry, and a combination of all of them will definitely lead to digital design being more accessible for everyone.

In this article, we will focus on some well-known web accessibility principles for improving user experience on web pages and most of them are certainly included in your country's government requirements as well.

Semantic HTML

The most basic principle of web accessibility is also a bit generic, but here it's important for you to know that you should use HTML tags correctly to help screen readers understand and navigate the content, identifying titles, subtitles and paragraphs, for example.

Set the language of the document by using the lang attribute in the opening <html> tag.
Replace <div> tags to semantic HTML elements, such as <main>, <article>, <section>, <header>, <nav> and <footer>.
Be sure to use heading tags to achieve logical levels of content structure, not because you want to only display larger font sizes: <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.
Nest HTML elements correctly, otherwise browsers and assistive technologies may not be able to understand the content as intended.
Use lists whenever you need to display a list of items, like a menu or ingredients on a receipt, for example: <ul> and <ol>.
Use<table> only when you need to display structured tabular data, not for layout or anything else.

Read more about semantic HTML in this MDN article.

Document Title

One of the main HTML tags, <title> (the document title element located in the <head>) is the first piece of information that screen readers say when users navigate between pages. This is also important because it appears in the browser tab, helping the user to know where they are and navigate between the pages open in their browser.

Title should be unique for every page of your site and any other related site;
It should be a descriptive phrase related to the content of the page.
If the title is long, try to put the most important words in the first 55-60 characters, as search engines usually display around that.

Alt Text (Image Alternative Text)

Images, which are part of the content and not just decorative, must have alternative texts to describe them, so that blind people (or those with low vision) and screen readers can understand them. Users who disable images to save bandwidth also take advantage of this feature.

Alt text are included by the "alt" attribute in the <img> HTML tag, see example bellow:

<img src=“logo.png” alt=“Diona Rodrigues logo” />

It’s important to use short, concise and appropriate alternative texts for images:

Alt text must always be associated with the image content.
If the image is just decorative, leave the "alt" attribute blank.
For functional images, such as images used as buttons, they should start with action words like “submit” and “go to”, for example.
If there is text in the image, such as a logo, for example, this text must be in the alternative text.

Keyboard navigation and focus

Although some users, for several reasons, prefer to navigate a web page using only the keyboard, people with low vision or blindness can use the keyboard combined with a screen reader for this purpose and browsers by default have a visual style to be applied to the elements receiving focus.

You can play around with this by going to this MDN project to see how native keyboard accessibility works by pressing the tab key.

Normally the navigation order by pressing the tab key depends on the HTML structure, however you can change it using the HTML attribute called “tabindex”. This attribute receives numbers, where the number 0 (tabindex="0") means that the element follows the natural order as it appears in the DOM; Negative numbers cause elements to be removed from the natural order of focus. Then, the priority focus order will be based on positive numbers, where the smallest has higher priority over the largest (1, 2, 3...).
Skip links are very useful for allowing users to skip the header and navigate to the main content of a page. They are usually visually hidden and can be accessed by pressing "tab" key. It is normally the first element that will receive focus on a page.
Although we can disable styling for focused HTML elements, you should never do this. However, you can create your own style like the example below.

See how to change the style of a focused HTML element by changing the outline CSS property:

:focus {
  outline: 3px solid hsla(220, 100%, 50%, 80%);
}

Alternatively, you can replace the outline CSS property with the box-shadow:

:focus {
  outline: none;
  box-shadow: 0 0 0 3px hsla(220, 100%, 50%, 80%);
}

Color and contrast

Following the WCAG Four Accessibility Principles, all users must be able to perceive the content on the page, and therefore color and contrast are vital to achieving this. Color should not be used as the sole visual means of conveying information, indicating an action, or distinguishing a visual element, as color may not be seen by colour-deficient users. And the contrast between the text and the background should be enough for users with moderately low vision to read it.

To measure contrast, WCAG uses a technique called “contrast ratio,” which takes the difference in luminance (or brightness) between the colours of foreground and background content (i.e., usually text) and checks its legibility. I really recommend you read “Contrast and Color Accessibility” by WebAIM to understand more about it.

Check out a list of suggestions to make content more accessible with color and contrast:

WCAG defines some types of text as “incidental,” meaning they have no contrast requirements: inactive elements (such as disabled buttons), decorative elements (such as text in images used only for background decoration purposes), invisible elements (like a skip link) and part of an image that contains other significant visual content (like a license plate in an image showing city traffic, for example).
Make sure the contrast between text (and also images of text) and background has a contrast ratio of at least 4.5:1. Larger text (minimum size of 18pt, or 14 pt bold) should have a ratio of at least 3:1. You can use tools like Contrast Checker to measure it.
Avoid high color contrast scheme for your site as it can make reading difficult for people with dyslexia, as this study shows.
Don’t rely solely on colours to convey information, as some people will not be able to see these colours. So, instead of using red colour to mark required form fields, mark them with an asterisk and in red, for example.

Typography and Text Resizing

Typography plays a big role on web pages and it is essential to choose the correct font family, font size, as well as properties such as letter and line spacing to make texts readable. Additionally, some users with low vision may need to zoom in to read content better, so relative rather than absolute sizes are very important for web accessibility.

Some tips for better typography when it comes to web accessibility:

Studies show that people with disabilities find it easier to read texts using common fonts such as Helvetica, Arial and Times New Roman, for example. Therefore, avoid choosing fonts with cursive designs or artistic shapes.
Avoid using too many different typefaces, as this can make our brain have more effort and spend more time to build a map of their characters and patterns to parse words when reading a text.
Line length should be between 50 and 120 characters to provide comfort when returning to the beginning of the next line.
Font sizes should be based on relative values (%, rem or em) to easily be resized when needed (using browser zoom for example).
Since screen readers cannot read text embedded in images, use markup texts.
Mainly for long texts, use elements such as headings, subheadings, lists and quotes, for example, to break the linearity of the content and make reading more comfortable.
WCAG defines how text spacing should be applied, with some exceptions, and shows that the spacing between letters must be at least 0.12 times the font size; line height/spacing, 1.5 times; spacing between paragraphs, 2 times; and spacing between words, 0.16 times. Be careful because short and large spaces can also affect readability.

More web accessibility improvements

Above you saw many aspects of a web page that you can improve, providing a better experience for all users, especially those with permanent or temporary disabilities. And of course there are other elements that you can also take into consideration, like ARIA, forms, animation, video and audio, for example. So I strongly suggest you take a look at web.dev and MDN documentation to learn more about it.

How to mesure web accessibility

The sooner accessibility is assessed the better, so if you are starting a new project I suggest you plan to apply at least the web accessibility best practices I mentioned in the previous section. Otherwise, it's best to group the improvements you need to apply and find the best way to do so based on the specifics of your existing project.

There are many ways to mesure web accessibility, from checklists to online tools and browser extensions:

Resources for learning about web accessibility

There are many ways to build a successful accessible website, and a good start is to follow the international Web Content Accessibility Guidelines (WCAG) created and maintained by the W3C. Because they are an extensive documentation, you can firstly learn WCAG 2 at a Glance, that combine different grouped guidelines.

Mozilla's MDN is another great resource for learning about web accessibility and is sure to provide all the knowledge you need to improve websites and applications, making them accessible to everyone.

The Google team, through web.dev, also offers an easy-to-understand course on web accessibility, where you will find several examples and practical suggestions on how to apply them.

Utah University also has a great project called WebAIM full of articles to learn about web accessibility.

At least but not least, I found a website called Monsido, which also has good explanations on the subject.

References on web cccessibility

Videos on Youtube

Conclusion

Web accessibility is how to create websites for everyone and should not be an option, on the contrary, it is non-negotiable when it comes to web pages.

“Accessibility is essential for developers and organisations that want to create high-quality websites and web tools, and not exclude people from using their products and services.” - W3C

There are several types of disabilities such as low vision, blindness, depth, autism, dyslexia, difficulty producing sound, and many others, and all of them must be taken into consideration when developing a web page, and certainly the set of strategies for Improving web accessibility will also depend on the type of project, industry and government laws.

By following at least some of the suggestions I left in this article, your web project will certainly provide a much better user experience for everyone in different contexts. Also, I really recommend that you take a look at all the links I've added throughout this article as they provide more information that can guide you through this process.

See you next time! 😁

6 useful CSS features you might not know about

Diona Rodrigues — Sat, 27 Apr 2024 17:20:25 +0000

CSS is getting bigger and bigger and even though we work daily with this style language, we do not know all the features we can use to better help us in our daily development. But in this article I will show you some CSS properties that can make a difference in your code. 😁

Some time ago I created an article called 6 Powerful CSS Techniques You Can Use Instead of Javascript and now I decided to extend this list by adding 6 other good CSS features that I believe can be useful and that most of us may not know about them.

::marker

I won't judge you if you still use list-style-type or ::before to change the marker of a list element, don't worry. 😁 However, I would like to introduce you to the CSS pseudo-element called ::marker. This feature was released a few years ago and is supported in all modern browsers and provides everything we need to customize not only the bullet content, but also the color, white space and all animations, transitions and font properties.

li::marker {
  content: '♪ ';
  font-size: 1.2em;
  color: purple;
}

Keep in mind that this pseudo-element has greater specificity than list-style-type. Read more about the CSS ::marker pseudo-element in the MDN documentation.

currentcolor

What if you want the border color of an element to be the same as the text color? Assuming you have a <div> whose border and the text inside it are blue, how would you manage it? I bet you probably thought about setting the same color twice, once for the property called “text” and once for the “border-color”, right? Forget it because now you can use the currentcolor keyword as it refers to the value of the “color” property.

div {
  color: blue;
  border: 10px solid currentcolor; /* border-color will be blue */
}

Read more about this old currentcolor keyword in w3schools.

color-mix()

For me, this is one of the coolest fully supported CSS features introduced in 2022 but started working in all modern browsers last year. I can't imagine how powerful this can be when we need to create a color palette by mixing two different colours - something that was only possible to do automatically using a JavaScript-based solution.

.result {
  background-color: color-mix(in srgb, blue, red);
}

The first parameter of this color-mix() function is a bit strange but it refers to the interpolation method.

Read more about color-mix() in this fantastic article by Smashing Magazine. And also in this another article on by MDN. And play around with this Codepen example.

mix-blend-mode

Have you ever played around with blending modes in some graphics software, like Photoshop, to merge colours and patterns between background and foreground to create cool images? Now CSS also provides a way to do this effect by using the property mix-blend-mode. Among many effects, you can use “multiply”, for example, which results in the multiplication of the top and bottom colours.

.img {
  mix-blend-mode: multiply;
}

backdrop-filter

Released about 7 years after CSS Filters, the CSS backdrop-filter property allows us to apply graphic effects to the area behind the element. Just like the previous CSS property, it can be very useful when you want to make the interface more visually appealing.

Because it applies to everything behind the element, to see the effect the element or its background needs to be transparent or partially transparent. - MDN docs

.title {
  background-color: rgb(255 255 255 / 30%);
  backdrop-filter: grayscale(75%);
}

accent-color

Last but not least, if you, like me, worked with CSS before 2022, you know how difficult it was to change the colours of checkbox and radio inputs, right? Although we still have a limitation to manage this type of HTML controls, we now have a CSS property called accent-color to easily manage their colours in some state.

input[type='checkbox'] {
  accent-color: purple;
}

The above styles can be seen when a checkbox is checked. Read more about accent-color in the MDN documentation.

Conclusion

CSS has been greatly improved and many new features appear every year and some that we don't know about have been around for a long time. The secret is not to try to memorize them all, but once you know them it becomes easier to understand what you can do using just CSS, which can greatly improve performance - in addition to the fact that it can be much easier to maintain the code.

I hope you learned something here and that this article has inspired you to continue searching for CSS features.

See you next time! 😁

Docker compose, orchestrating and automating services

Diona Rodrigues — Sun, 21 Apr 2024 14:36:35 +0000

Docker compose is a tool that allows us to replace most of the commands and configurations that we normally run in the terminal to orchestrate and automate Docker services: such as creating several containers based on different images, connected to each other by networks and using volumes to persist their data, for example.

Even working on a simple dockerized project, we often run several different Docker commands in the terminal. And this entire process must be memorized following a specific order to execute the same commands as many times as necessary during the development life cycle. I think you can imagine how complicated it can be especially on large projects, right?

What’s Docker compose?

If you are the kind of developer who saves Docker commands in a text file along with other instructions that you need to memorize, I would like to introduce Docker compose to you. :)

“Compose simplifies the control of your entire application stack, making it easy to manage services, networks, and volumes in a single, comprehensible YAML configuration file. Then, with a single command, you create and start all the services from your configuration file.” - Docker documentation

Docker commands to be converted into Docker compose

In the next section you will find a Docker compose file example containing commands to create 3 different containers used in a same application: "database" container using Mongo, "backend" using Node and "frontend" using React. The database container will be based on a Docker hub image, while the backend and frontend will have specific directories in the local project with their own custom images and files. The database and backend containers must be connected as we need to run CRUD methods on the database and we do this using Docker networking. In addition to these settings, we will also have other settings such as ports to provide a way to make requests to the backend from the frontend, and volumes and bind mounts to persist data.

Let's imagine the following basic directories and files structure

├── backend/
│ ├── Dockerfile
│ └── app.js
├── env/
│ ├── backend.env
│ └── mongo.env
├── frontend/
│ ├── Dockerfile
│ └── src
├── compose.yaml

You can check out all the Docker commands from the above scenario - and their full explanations -(which we could run in the terminal, but which will be translated into configurations in Docker compose file) in two articles I wrote before called How to use Docker Images, Containers, Volumes and Bind Mounts and How to connect different containers with Docker networking.

Creating a Docker compose file

Now it’s time to create the compose file based on the scenario described in the previous section.

Docker compose file

First of all, create a file in the root project directories called compose.yaml. YAML is a text format that uses indentation to specify dependencies between configuration options. Be aware that incorrect indentation will cause problems with executing commands properly.

services:
  mongodb:
    image: 'mongo'
    volumes:
      - data:/data/db
    env_file:
      - ./env/mongo.env
  backend:
    build: ./backend
    ports:
      - '80:80'
    volumes:
      - ./backend:/app
      - /app/node_modules
    env_file:
      - ./env/backend.env
    depends_on:
      - mongodb
  frontend:
    build: ./frontend
    ports:
      - '3000:3000'
    volumes:
      - ./frontend/src:/app/src
    stdin_open: true
    tty: true
    depends_on:
      - backend

volumes:
  data:

Docker compose file explanations:

services: we can understand Docker service as a container. Therefore, this top-level element called “services” is a key map where each key represents an individual container, which will be created following its configurations: such as image, volumes and ports, for example. So here we see three different containers named "mongodb", "frontend" and "backend".
image: this key specifies the image this container is based on to be created. It can be a local image or an image from the Docker hub.
build: is used to define the dockerfile path to build an image to be used by this service. It's useful when the image isn't already created.
volumes (inside services): when inside the service, specifies the volumes this container will create (or use if already created).
volumes (same level of services): At the top level, this key specifies all named volumes created in each service that should be shared among all services. Each named volume must be on a line followed by a comma. This syntax is a little strange because there is nothing after the comma, but this is how it should be declared.
env_file: defines the path of a file containing the environment variables to be used by the service.
depends_on: when working with multiple containers, it is used to specify when a container depends on another container to run. In the above example, the frontend container will be created only after the backend which will be created after mongodb.
ports: exposes a container port to a port on the host machine (local_port:container_port). In our case, the backend can be accessed with port 80 while the frontend with port 3000 (localhost:80 and localhost:3000 respectively).
stdin_open and tty: allow we send input to the Docker container, which is important when working with React, for example.

Some important extra notes:

We can also create a key called networks inside each service to connect all containers which have the same network names. However, as Docker already do it automatically, most of the times it's not necessary. Like volumes, networks must be declared at the top-level to be shared across different services.

If you want to declare environment vars within this compose file, you can use the environment key instead of env_file. Be aware that if you need to prevent others from seeing this sensitive data you should use a file and add this file in .gitignore, for example.

The services keys are the container names. So you can use these names to create connection between containers. For example, you can connect to the mongodb container from the backend using a solution like mongodb://mongodb:27017/my_database_name where the second "mongodb" is the name of the mongodb container.

While we need to specify the absolute system path to use bind mounts to map our project's folders and files with those inside the Docker container when running the command in the terminal, in the docker compose file we only need the relative path.

Commands to run and manage Docker compose

docker compose --help: see all options you can use with docker compose command
docker compose up: to build, create and start all images and containers
docker compose up -d: same as above but run containers in detach mode (in background)
docker compose down: stops and removes containers and networks created by up
docker compose down -v: same as above but also delete volumes
docker compose down -v -rmi: same as above but also delete images used by services

Check all docker compose CLI options in the Docker docs.

Conclusion

Docker compose helps to quickly set up a development environment for our dockerized projects, especially when using multiple containers. And once this file is created and our services are configured correctly within this file, we can start the containers by running just one command in the terminal.

I also showed how to orchestrate containers so that one starts exactly when another is already created, and also how to configure ports and manage volumes using Docker Compose.

I hope you learned a lot from this article.
See you next time! 😁

Docker networking, how to connect different containers

Diona Rodrigues — Thu, 11 Apr 2024 21:34:43 +0000

Having different containers is quite common when using Docker in a project, such as one for the React application, one for the backend, and one for the database, for example. And in this article I will show you how to connect these different containers using a solution called container
networking.

Following Docker best practices, each container should have only one responsibility, that’s why we usually have different containers in a project. But how can all these containers be connected and communicate with each other or use services outside the Docker? The answer for this question is a feature called networking.

Scenario overview

All examples in this article will be based on the following example: a Node JS application that needs to create, read, update and delete data (CRUD) from a Mongo database (but can be applied to any type of language and services as the main idea here is to demonstrate how we can have different but connected containers).

So, let's imagine we have a Node JS file that has methods for managing data from a Mongo database. In this file we also need to connect to the database to be able to execute all these methods.

In this scenario we will have two containers:

a container to run the Node JS application (which contains all the methods mentioned above and also the connection to the database)
another container to run Mongo db

Next, we will focus on connecting to the Mongo database as this is the most important part of this article.

Connecting different containers using network

“You can create custom, user-defined networks, and connect multiple containers to the same network. Once connected to a user-defined network, containers can communicate with each other using container IP addresses or container names.” - Docker docs

At this point you should know how to run containers via command line. I have an article called “How to use Docker Images, Containers and Volumes” where you can learn about it in details.

1- Creating networks

The first step is to create a network to connect the containers.

docker network create [network_name]

Example:

docker network create my_app_net

2- Running Mongo db container connected to the created network

Now it’s time to run the Mongo db container via command line and connect it to the network.

docker run -d --network my_app_net --name mongo_db mongo

Where my_app_net is the network created above, mongo_database is the name of this container, and mongo is the name of the image this container is based on. The container name is important because we will use it in the next step.

3- Connecting to Mongo db container from Node JS file

As I mentioned in the Scenario Overview section, let's imagine here that we have a Node JS file that needs to connect to the Mongo database container created in the previous step. Then we can have the following code:

mongoose.connect(
  'mongodb://mongo_db:27017/my_database_name',
  …
);

Where mongo_db is the name of the container created in the previous step and 27017 is just the port provided by Mongo (you can read more about this in its documentation). In a non-Docker solution, when we install Mongo on our host machine, mongo_db would be localhost or an IP address - in this case, it is the name of the container that contains the database we want to connect to.

4- Running Node JS container connected to the Mongo db container

Once we have the Mongo db container running - and the database connection in the Node JS file is already configured to connect to this container - all we need to do now is start this Node JS container using the same network as the Mongo container uses.

docker run -d --rm -p 3000:3000 --network my_app_net --name my_app my_node_img

Where my_app_net is the above created network, my_app is the name of this container and my_node_img is the name of the image which this container is based on.

And that’s all. Now you know how to connect containers using Docker container networking. :)

You can read more about networking in the Docker documentation.

Connecting containers to services installed on our host machine

When we want to connect to a service installed on our host machine from a Docker container, we have a different way of doing it.

Now, let's imagine we have a Mongo database installed on our host machine instead of a container. When started, this service exposes a port that can be accessed using: //localhost:27017/my_database_name.

In order to have this url working fine inside the container, and be able to execute CRUD on the db, we should replace localhost to host.docker.internal. This special domain will be understood by Docker and be translated to the IP address of our host machine as seen inside Docker container. So it will be something like:

mongoose.connect(
  'mongodb://host.docker.internal:27017/my_database_name',
  ...
);

Read more about this special Docker DNS name here.

Conclusion

As we learned, communication between containers is easier to implement using the Docker network, so all we need to do is create a network and use it to run all the containers that must be connected.

We also saw that we can also use special Docker DNS names to connect services outside of Docker from our containers.

I hope you liked it.
See you next time! 😁

How to use Docker Images, Containers, Volumes and Bind Mounts

Diona Rodrigues — Sat, 30 Mar 2024 23:53:16 +0000

Even if you already work with Docker and want to better understand its core concepts or are trying to learn how this open source platform works, this article can help you dive into Docker images, containers, volumes, and bind mounts providing not only explanations of what are, but also how to use them.

Docker is a tool for managing containers and containers, in a nutshell, are packages containing everything a software needs to run, such as system tools, libraries and code. Using Docker, we can quickly deploy and scale applications across multiple environments, ensuring they run the same way even on different machines.

“A container is an isolated environment for your code.” - Docker documentation

In Node JS projects, for example, the Node version as well as the dependencies used in the project will always have the same versions on the team's machines, as well as on production versus staging versus local machines. Another advantage is that we don't need to install Node on our local machine and all project dependencies every time we run the project, they will be managed by Docker through images, containers, volumes and bind mounts.

Docker Images, Containers, Volumes and Bind Mounts

Images: templates / blueprints of code to be executed in a Docker container.
Containers: they are instances of Docker images, which means they are responsible for running and executing code. Different containers can be created based on the same image, but each of them will have its own data and state.
Volumes: the mechanism for persisting data outside of containers, fully managed by Docker using a dedicated directory on our host machine.
Bind Mounts: is another way to make data stored on our host machine accessible by containers. By using this option we manually bind a file or directory on the host machine to be mounted into a container.

Images can be shared and reused by different containers while containers are created and destroyed over an application’s lifecycle.

Once an image is built, it creates a snapshot of the code and lock it. So, in case we need to update the code inside a container a new image should be created to be used by the containers attached to it. Of course there are other ways to make it flexible using volumes and bind mounts.

Last but not least, data can be managed using volumes and bind mounts, and there are different ways to do this, but I will explain later.

Docker commands reference

This is a brief reference to some commands that you will see in the next sections.

Main commands

docker build [path_of_the_dockerfile] (or just . (dot) if it’s running from the same directory): creates an image based on dockerfile instructions
docker run -p [local_port]:[image_exposed_port] [imge_id/name]: creates a container based on the image and enable a local port to access the project
docker —help: we can use it along with any docker command to see a list of related commands and their explanations

Docker image commands

docker images: list all images
docker rmi [image_id/name]: delete the image
docker image prune: delete all unused images
docker image prune -a: delete all images
docker inspect [image_id/name]: display info about the image

Docker container commands

docker ps: shows all containers that are running
docker ps -a: shows all created containers
docker stop [container_id/name]: stops the container
docker start [container_id/name]: starts an existing container
docker logs [container_id/name]: display all the logs of that container in the terminal
docker rm [container_id/name]: delete the container

Docker volume commands

docker volume ls: lists all volumes
docker volume rm [volume_name]: deletes volume
docker volume prune: removes all unused volumes

What's Dockerfile

Dockerfile is the name of the file - usually created in the root project directory - to handle the instructions to create an image for our project (we can also specify other images we are going to use to compose our own image, like Node image, as well as some instructions to copy files, install dependencies…).

As you see, images can be shared and the main tool to manage it is the Docker hub.

Example of Dockerfile

Note: The code below is based on a Node application and will be used through this article as an example for most of the commands in the next sections.

Let's imagine that we have an application containing a file called server.js that is responsible for this Node application and exposes it on port 80.

// Build this image based on node image
FROM node
// The working directory (it is created if it doesn't already exist and because of it)
WORKDIR /app
// Copy package.json into /app folder
COPY package.json /app
// Install all dependencies
RUN npm install
// Copy all directories and files from the root into /app folder
COPY . .
// Expose the Node application port
EXPOSE 80
// Run default commands when a container is started
CMD ["node", "server.js"]

See all supported instructions by Dockerfile in the Docker documentation.

Difference between RUN and CMD:

RUN executes the instruction when the image is created
CMD executes the instruction when the container is started

Docker image layers

When an image is rebuilt, Docker is smart enough to recognise what have been changed and then use the cached result of the instructions instead execute every instruction again and again, which is great for optimisation. It’s called layer based architecture, where each instruction represents a layer that is cached.

Once a layer is changed (i.e. the result of an instruction), Docker runs that layer and the next ones again instead of getting them from the cache, which is why we first copy package.json and install its dependencies in the example above before copying all other files. By doing this, we guarantee that dependencies will only be reinstalled when package.json is changed. If we add package.json after copying the other files, any small changes to these other files will install all Node dependencies again.

Container is just another layer on top of it. So, because one image can have multiple containers, each one of them is a separated layer on top of the Dockerfile instructions.

How to create images and containers

The examples below are based on the Dockerfile of the section above, in a scenario where the Dockerfile is located in the root of the project and we are executing the Docker commands in the same directory level of this file.

Creating Docker images

docker build .

Once the command above is run, and an image is created based on the Dockerfile, we can copy its generated id to be used to run the container. In case you need to check the image id after its creation, you can use docker images to list all of them.

Creating Docker containers

docker run -p 3000:80 -d --rm sha256:65597563a5b3d5b5b74dcc5e27256f015f8fc7a57f5adfc79e7c4517a156dcfd

Here we have:

the id of the image (the long hash at the end of the command - I’ll show how to manage images using custom names later)
-p 3000:80 is used to enable a local port to access the project port from the Docker container
-d to run the container in background, so the terminal will be free to run other commands
--rm to delete the container as soon as it is stopped

A more basic command would be:

docker run -p 3000:80 sha256:65597563a5b3d5b5b74dcc5e27256f015f8fc7a57f5adfc79e7c4517a156dcfd

Once a container is running, you can stop it. So you can list all the containers using docker ps to list all the containers that are running, get the ID of the container you want to stop, and then run docker stop 0401f0d42e86, where the hash in this example is the container ID.

Naming images and containers

Naming Docker images

docker build -t [image_name]
docker build -t [image_name]:[tag_name] .

We can use tags (-t) to specify not only the image name but also its different versions, like node:14, for example ("node" is the image name and "14" is the version of this image).

Example:

docker build -t sunflower .
docker build -t sunflower:latest .

These commands create an image called “sunflower” and also a version of it called “latest” (which can be numbers or any other word you want).

Renaming Docker images

docker tag [current_image_name]:[current_tag_name] [new_image_name]:[new_tag_name]

docker tag sunflower:latest butterfly:latest

This command will replace the image name “sunflower” to “butterfly”.

Naming Docker containers

docker run -p 3000:80 -d —rm —name [container_name] [image_name/id]

Example:

docker run -p 3000:80 -d --rm —name myapp sunflower

This command will create a container called “myapp” based on an image called “sunflower”.

Sharing images

There are two ways to share an image: sharing the Dockerfile or pushing the image to Docker hub by making it disposable in private or public repository.

Bellow you can check out some steps to push a local image onto Docker hub.

Go to Docker hub
Login and access your repositories, and create a new one
Your remote repository should match with your local image name.
Use docker push [image_name] to push your image to Docker hub

Example:

docker push dionarodrigues/butterfly:latest

Where "dionarodrigues" is my username in Docker hub and "/butterfly:latest" is the repository name. So, my local image should be called "dionarodrigues/butterfly:latest"

And this is the command to use an existing image from Docker hub:

docker pull [repository/image_name]

Example: docker pull node or docker pull dionarodrigues/butterfly:latest

Managing data with Docker

Basically, there are 3 ways to manage data inside docker:

Images: when we create an image and copy the code into it from Dockerfile by using the command COPY. Data will be locked, read-only, until the image is created again. So, even if we change the files we copied into the image, they will just be updated with the latest changes when the image is rebuilt again as they are a snapshot from the time the image was created.
Containers: the data is stored when a container is running and destroyed when a container is deleted. The difference here is that we can manage files while the container is running, however it’s not easier as the data will be in memory. For example, we can have a form that will create a file when submitted which will be available to be accessed while its container is running. Don’t forget that it will be deleted along with the container.
Volumes: are files and folders on our host machine (local environment, outside the containers) controlled by Docker that are mapped with folders inside the containers. Docker volumes can persist data even when containers are deleted. Let's take the same example of the file being created by a form submission: when this file is stored on a volume, it can be shared with other containers and will persist even after the container that generated that file is deleted.
Bind Mounts: Similar to volumes, where data persists independently of containers, but with Docker bind mount we control where files and directories to be mounted in containers are stored on our host machine and any changes made to this mapped data will be instantly reflected in the container while with volumes no. So this is the solution to be able to easily create/edit/delete files inside a container even if it is running. Imagine you have started a React application using Docker and you are editing the JSX files and these files are mapped into the container using bind mount so that you see the changes reflected in the interface as soon as you save the file changes, no need to build a new image for that.

Volumes

As you saw in the section before, volumes are folders in our host machines, managed by Docker to persist data by mapping local with container folders.

You can find a full example of how to create volumes in the next section called "How to create volumes and bind mounts", before let’s dive into the 2 ways to create them:

Anonymous volumes

This kind of volume is attached to the container, so it will only be useful while the container exists, however it survives when the container stops to run. It can’t be shared across different containers.

It’s useful when you need to keep a file inside the container untouched while you replace other files there, for example.

To create anonymous volumes, we can add an instruction in the dockerfile:

VOLUME [“/app/node_modules”]

Or run the command below along with the container command:

-v [folder_inside_container_to_be_persisted]

Example:

-v /app/node_modules

Named volumes

By assigning a name to the volume during the container creation, this data can be persisted after the container is deleted and can also be shared across different containers.

Once we name the volume, Docker will check if it already exists, and if yes, Docker will use it instead of creating a new one.

A good example is when a container is running and a form is submitted and the application creates a file containing the form data and stores it in a folder called “/app/feedback”. So to keep this data (file) even after the container is deleted, we can use a named volume by passing the path of this file folder along with the name of the volume. Then this data can be used to start this container again or even when creating another container.

To create named volume we run the command below along with the container command:

-v [volume_name]:[folder_inside_container_to_be_persisted]

Example:

-v feedback:/app/feedback

Bind Mounts

Different of the other options, where Docker controls where the data is stored, now we have full control of it. With Docker Bind Mounts we map folders from our local environment with folder inside containers, which is amazing as now we can create/edit/delete files and see the changes instantly reflected in the container. By using this option the data will be persisted even after container deletion as the data will be in our host machine.

For example, let's say you are working on a React project and want to use docker to start your project. With Docker bind mounts, you can map your project's folders and files with those inside the Docker container, so you can create/edit/delete any file or directory and see the changes in your browser instantly. That said, the container will use your local files, not those locked when the image was created or those created inside the container or those created Docker using volumes.

To create bind mounts we run the command below along with the container command:

-v [full_path_of_our_machine_folder]:[folder_inside_container_to_be_maped_with_our_machine_folder]

Example:

-v /Users/dionarodrigues/Documents/Development/my-project:/app

Just a quick note: If you don't always want to use the full path, you can use these shortcuts:

MacOS / Linux: -v $(pwd):/app
Windows: -v "%cd%":/app

Example:

-v $(pwd):/app

How to create volumes and bind mounts

Although we have 3 different options (anonymous and named volumes and bind mounts), we can combine them to make sure all the data will be persisted when a container is created. Bellow is an example using all of them together:

docker run -d -p 3000:80 --rm --name [container_name] -v [folder_inside_container_to_be_persisted] -v [volume_name]:[folder_inside_container_to_be_persisted] -v [full_path_of_our_machine_folder]:[folder_inside_container_to_be_maped_with_our_machine_folder] [image_name/id]

docker run -d -p 3000:80 --rm --name myApp -v /app/node_modules -v feedback:/app/feedback -v "/Users/dionarodrigues/Documents/Development/my-project:/app" sunflower

Or using shortcuts for the local machine path:

docker run -d -p 3000:80 --rm --name myApp -v /app/node_modules -v feedback:/app/feedback -v $(pwd):/app sunflower:latest

In this example we use anonymous volume (first -v in the example) to prevent “node_modules” to be overwritten when we map all folders of our local machine with folders inside the container (bind mounts, third -v). Named volume (second -v) is used here as an example to persiste data created inside the container when it’s running, so that we can share this data with other containers or even initialise a container with this data (if it already exists).

Like images and containers, you can manage volumes by listing them using docker volume ls command to get their names and them delete them using docker volume rm [volume_name] command or even deleting all unused volumes with docker volume prune command.

Conclusion

The main concept in Docker is containers. Containers are completely isolated processes from our machines having all they need to run our projects code. Each container is independent and can be portable to anywhere, what means that the same container will run on the same way in local and production environments, for example, guaranteeing the same version of dependencies and the database.

Docker containers are created based on Docker images (packages containing all files and configurations to run a container), which are created using instructions from Dockerfile.

Data can be persisted using Docker Volumes and Docker Bind Mounts. While Docker controls where data on our host machine is stored, we control it using bind mounts, and the latest is the solution to manage file changes and have them instantly reflected in the container, good when we are running React application using Docker, for example, and editing JSX files.

I hope you have learned a lot from this article. Let me know.
See you next time! 😁

Understanding the most important HTTP status codes

Diona Rodrigues — Mon, 01 Jan 2024 17:51:10 +0000

Maybe you never realized how difficult the web would be without HTTP status codes, or what a terrible place to work without them, did you? How would we know when a resource was not found (404) or when a page/url was permanently moved (301), for example?

There are more then 60 different status codes organized into 5 groups and maybe you have used just less then 5 as working as a developer. Stay with me and I'll explain to you the most important HTTP status codes and which ones you should keep in mind to better handle web API requests.

What are HTTP status codes by the way?

Okay, before we go through the status codes, let's recap what HTTP (Hypertext Transfer Protocol) is.

Developed in the early 1990s, HTTP is the basis of the World Wide Web (www) and is basically a client-server protocol for transferring data: a client, such as a web browser, makes a request and the server sends a response to it.

Over these more than 30 years, HTTP has been greatly improved, but it still maintains its initial purpose. Thus, when the server sends a response to the client, it also sends the status code of that response, which is made up of 3 digits, like 404, 500 and 302 for example.

Most used status codes

Status codes are organized into 5 different groups: informational, successful, redirection, client error, and server error.

1- Informational responses (100 – 199)

Although status codes in this group indicate that the server is still processing the request, they are never used. So we can ignore them.

2- Successful responses (200 – 299)

If you've ever dealt with API requests, you've probably used some of the 10 status codes in this group, as they indicate that the request was fulfilled successfully.

200 - OK: the most common, is a generic code and means the request was successful.
201 - Created: commonly sent after POST requests, it means the new resource was created successfully.

3- Redirection messages (300 – 399)

As the name suggests, in this group you will find two of the most used status codes to indicate that the page or resource has been moved.

301 - Moved Permanently: means the page or resource has been permanently moved to another URL. Since the new URL can be found in the response, browsers will automatically redirect users. Search engines also use this response to associate the content of the old URL with the new one, in order to maintain its SEO ranking. Examples of this status code are when the site has been migrated to a new domain or changed from HTTP to HTTPS, for example.
302 - Found: similar to above, but means the page or resource has been temporarily moved. The biggest difference here is that search engines will keep the old URL indexed and show it in search results. Good examples of this code are: A/B testing (when we show different versions of a page to test its design or some functionality) and when we redirect the user to a version of the website based on location/language.

4- Client error responses (400 – 499)

Among its almost 30 client error status codes here you will also find the most common ones used when dealing with API requests.

401 - Unauthorized: in fact, it means that the client is not authenticated when this is necessary to obtain the requested response.
403 - Forbidden: it's about permissions. So here the server informs that the client does not have permission to make this request, even if the client is authenticated. A good example is when a generic system user tries to load an admin route.
404 - Not Found: means that the page or resource was not found. Very common when we try to access a URL that doesn't exist. Sites often have a custom page to alert users about this with phrases like “Page not found”.
429 - Too Many Requests: when the client has exceeded the allowed number of HTTP requests. For example, when the server limits the number of API calls per hour.

5- Server error responses (500 – 599)

Similar to the previous group, but here the status codes are related to some issue on the server, not on the client.

500 Internal Server Error: the most famous code in this group indicates that a problem occurred on the server when trying to make a request. It's very generic, so it could be anything. Sites also usually have a custom page to alert users about this with phrases like “Internal Server Error”.

References

Conclusion

As you can see from this article, there are not many HTTP status codes to keep in mind when working with client/API requests so that they are easy to remember over time. By knowing the ones I described here, you will be able to better deal with server responses, improving your code, helping search engines to index the site and also delivering a better user experience as you will be able to display customized pages depending on the status code.

See you next time! 😁

Forem: Diona Rodrigues

Why Clean Code Matters: Lessons from Uncle Bob

Clean Code Principles for JavaScript

Naming (for functions and variables)

Functions

Comments

Testing

Code Review

Conclusion

Essential SQL Commands: A Quick Reference Guide

Query Filtering & Sorting

Comparison Operators

MySQL Data Types (Quick Reference)

Primary & Foreign Keys

Joins

Database Management Commands

Data Manipulation Commands

Aggregate Functions

Transactions

Conclusion

Redux Toolkit Advanced: Scaling Redux Toolkit for Large Applications

Introduction to Advanced Redux Toolkit Techniques

Before we start

1- Handling Cross-Slice Actions with createAction

2- Creating Slices That Respond to Shared Actions

✈️ Airlines Slice

Countries & 📍 Pointers slices

3- Setting Up the Store with Our Slices

Connecting the Redux Store to React

4- Sending Data to the Store with dispatch and Shared Actions

5- Optimizing State Access with Selectors

Creating the Selectors

Airlines selectors

Countries selectors

Pointers selectors

6- Custom Hooks for Redux State

Airlines custom hooks

Countries custom hooks

Pointers custom hooks

Beyond Simple Hooks

7- Using Custom Hooks to Display Data in Components

Conclusion: 🚀 Wrapping Up Advanced Redux Toolkit Techniques

Redux Toolkit Fundamentals: Simplifying State Management

What is Redux, BTW?

Introducing Redux Toolkit (RTK)

Using Redux Toolkit in practice: Building a simple To-Do list

1. Install Dependencies

2. Setting Up the Redux Store

3. Creating the To-Do Slice (Reducers & Actions)

4. Building the To-Do List UI

Adicional explanations:

Using createEntityAdapter for efficient state management

Why Use createEntityAdapter?

Enhancing todoSlice.js with createEntityAdapter

Redux slice data without Adapter:

Redux slice data with Adapter:

Key Differences & Benefits of createEntityAdapter

References

Conclusion

NVM Basics & Bash Aliases: Simplify Your Development Workflow

NVM (Node Version Manager)

How to install NVM

Install Node.js via NVM

Basic NVM commands

Use a specific Node.js Version

List all installed Node.js versions

Set a default Node.js version:

Bash Aliases

Creating Bash Aliases

Edit the Bash Configuration File

Add Aliases

Reload the Bash File

Using the Bash aliases

Conclusion

For further reading, check out these helpful resources:

From useEffect to React Query: Modernizing your data management in react

Why should we stop fetching data using React Effects

Some downsides of using Effects for data fetching:

How React Query works

1. Querying Data

1- Handling Cross-Slice Actions with `createAction`

Using `createEntityAdapter` for efficient state management

Why Use `createEntityAdapter`?

Enhancing `todoSlice.js` with `createEntityAdapter`

Key Differences & Benefits of `createEntityAdapter`

Step 2: Setup `QueryClientProvider`

Step 3: Fetch Data with `useQuery`

Step 4: Handle Data Mutations with `useMutation`