DEV Community: Andrés Valdivia Cuzcano

asChild: Understanding the Slot Pattern in React

Andrés Valdivia Cuzcano — Wed, 21 Jan 2026 23:38:43 +0000

What is a Slot?

Have you ever struggled to create a truly flexible UI component? Imagine a Button that needs to render as a native <button>, an <a> tag for external links, or a Next.js <Link> for navigation—all while maintaining the exact same styles, hover states, and logic from your design system.

You might have tried these common but limited approaches:

Conditional Rendering: Using if/else inside your component to switch tags based on a prop (e.g., as="a"). This often leads to "prop bloating" and complex types.
Utility Classes: Exporting CSS classes for others to use. This keeps styles consistent but loses the encapsulated behavior of your component.

The Slot pattern solves this through true composition. Your component provides the "skin" and behavior, while the consumer provides the underlying element. The result? No DOM pollution, no prop drilling, and clean, reusable code.

Building the Foundation

To create a Slot that feels "magic" to the end user, we first need to build a robust engine under the hood. The challenge of the Slot pattern is that we are essentially merging two different components into one DOM node. This means we have to manually handle things that React usually does for us automatically: managing references and merging properties.

💡 A Note on React version

This implementation is designed for React 19 and beyond. Starting with React 19, ref is treated as a standard prop, meaning we no longer need to wrap our components in forwardRef to access them.
If you are using React 18 or lower, the logic for passing and receiving refs will differ. You would need to use React.forwardRef to capture the ref from the consumer and pass it into our composeRefs utility.

Combining Refs

A core requirement of the Slot pattern is that the final DOM node must be accessible to both the design system and the consumer. However, a React element can only accept a single ref prop.

The "problem" is that we need to "combine" the Slot's internal references and the child's potential references into one. To do this, we use a callback ref approach. This allows us to receive the DOM node and "broadcast" it to every reference that needs it.

function composeRefs<T>(...refs: (React.Ref<T> | undefined)[]) {
  return (node: T) => {
    refs.forEach((ref) => {
      if (typeof ref === 'function') {
        ref(node);
      } else if (ref != null) {
        ref.current = node;
      }
    });
  };
}

How it works

The callback we return is executed as soon as the component is mounted. Within the loop, we check if the ref is a function (callback) to execute it, or an object to store the node in the .current property. This ensures that no matter how the consumer or the Slot defines their reference, the DOM node is stored correctly in all locations.

Merging Props

Now that we can synchronize references, we need to handle the rest of the props. The goal is simple: the Slot defines the "base" contract (styles and behavior), while the Child provides the specific implementation.

However, we can't just spread props blindly. We have to decide which props should be overridden and which should be merged.

Prop Prioritization: Default vs. Intentionality

In the Slot pattern, we treat the Slot as the provider of defaults and the Child as the source of truth.
The Slot defines the base design system requirements (like aria- / data- attributes or styles), but the child element represents the specific use case. If there is a conflict, the child’s props should take precedence because they represent the developer's intentional choice for that specific implementation.

The three special merge cases

While most props follow a "last one wins" rule, three specific types of props require a more surgical approach to avoid losing functionality:

Prop Type	Merging Strategy	Why?
CSS Classes	Concatenation	We want to keep the Slot's layout styles and the child's custom utility classes.
Inline Styles	Object Merging	To ensure styles from the Slot doesn't wipe out specific ones from the child.
Event Handlers	Chaining	We need the Slot's default behavior (e.g., show an alert) and the child's specific action (e.g., `onClick`) to both fire.

To achieve this, we can create a mergeProps utility. Here is how we handle them:

function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
  const overrideProps = { ...childProps };

  for (const propName in childProps) {
    const slotValue = slotProps[propName];
    const childValue = childProps[propName];

    // Check if the current prop is an Event Handler
    const isEventHandler = /^on[A-Z]/.test(propName);

    if (isEventHandler && slotValue && childValue) {
      overrideProps[propName] = (...args: unknown[]) => {
        childValue(...args);
        slotValue(...args);
      };
      continue;
    }

    // If both have the same CSS property, we prioritize the child's one
    if (propName === 'style') {
      overrideProps[propName] = { ...slotValue, ...childValue };
      continue;
    }

    if (propName === 'className') {
      overrideProps[propName] = [slotValue, childValue]
        .filter(Boolean)
        .join(' ');
    }
  }

  return { ...slotProps, ...overrideProps };
}

💡 Tip:

When chaining event handlers, it’s often best practice to call the child’s handler first. If the child calls event.preventDefault(), the Slot can then decide whether or not to proceed with its default behavior.

The Transformation: Cloning the Child

Now that we have our utility functions for merging props and combining refs, it’s time to build the component that performs the "transformation”.

The Slot is essentially a transparent wrapper. Its job isn't to render a <div> or a <span> of its own, but to "possess" its child. We take the setup defined on the Slot (styles, event handlers, and refs) and inject them directly into the child element. To the browser, the Slot doesn't exist—only the augmented child does.

How it works

To achieve this, we use React.cloneElement. This allows us to take the child component (the "slottable" element) and return a new version of it that merges the Slot’s properties with its own.

Key Benefits of this Approach:

Zero DOM Pollution: You won't see any extra wrapper tags in your inspector.
Flat Hierarchy: The child remains the top-level element, preserving CSS selectors like :first-child, flexbox layouts and so on.
Prop Injection: We effectively "teleport" the design system logic from the Slot directly into the underlying element (be it a native <button>, a Next.js <Link>, or a custom component).

type SlotProps = React.DetailedHTMLProps<
  React.HTMLAttributes<HTMLElement>,
  HTMLElement
>;

function getElementRef(
  element: React.ReactElement,
): React.Ref<unknown> | undefined {
  return (element.props as { ref?: React.Ref<unknown> }).ref;
}

function createSlotClone(ownerName: string) {
  const SlotClone = ({ children, ...slotProps }: SlotProps) => {
    // Verify that 'children' is a single, valid React element (not a React Node)
    if (React.isValidElement(children)) {
      const childrenRef = getElementRef(children);
      const mergedProps = mergeProps(slotProps, children.props as any);

      if (children.type !== React.Fragment) {
        mergedProps.ref = ref ? composeRefs(ref, childrenRef) : childrenRef;
      }

      return React.cloneElement(children, mergedProps);
    }

    // Fallback: If there's more than one child, we call React.Children.only.
    // This will throw a descriptive error to enforce the "single-child" contract.
    // If no children exist, we simply render nothing.
    return React.Children.count(children) > 1
      ? React.Children.only(null)
      : null;
  };

  // Attach the displayName for easier debugging in DevTools
  SlotClone.displayName = `${ownerName}.SlotClone`;
  return SlotClone;
}

Putting it Together: The Public Slot API

Now that we have the internal logic to handle cloning, refs, and props, we need to expose a clean, usable component. We do this using a Factory Function.

This factory, createSlot, generates a Slot component specifically tailored for a specific part of your design system (like a Button or a Card). It acts as the "entry point" for the pattern, delegating the heavy lifting to the SlotClone we built earlier.

function createSlot(ownerName: string) {
  // Initialize the internal clone logic with the owner's name
  const SlotClone = createSlotClone(ownerName);

  // This is the actual component the developer will use
  const Slot = ({ children, ...slotProps }: SlotProps) => {
    return <SlotClone {...slotProps}>{children}</SlotClone>;
  };

  // Attach the displayName for easier debugging in DevTools
  Slot.displayName = `${ownerName}.Slot`;
  return Slot;
}

// Create and export the Slot component
export const Slot = createSlot('Slot');

Why this separation matters

By separating Slot from SlotClone, we create a clean boundary:

The Slot: Is the simple interface. It accepts props and children just like any other React component.
The SlotClone: Is the "engine." It handles the complex work of merging styles, chaining event handlers, and synchronizing refs.

This structure makes our code highly maintainable. If we ever need to change how props are merged, we only change the internal logic, and the public Slot API remains exactly the same.

The "Slottable" Component: Handling Complex Content

As the components grow, they often need more than just a single text string. In a Button, you might have an icon that should always be there, regardless of whether the button renders as a <button>, an <a>, or a <Link>.

The problem? If we pass multiple children to our Slot, the cloning engine will fail because it doesn't know which child is the "target" and which is just extra UI (like the icon).

// button.tsx
import React from 'react';
import { Slot } from '../slot';

interface Props {
  children?: React.ReactNode;
  icon?: React.ReactNode;
  asChild?: boolean;
}

export function Button({ children, icon, asChild }: Props) {
  const Component = asChild ? Slot : 'button';

  return (
    <Component
      className='flex items-center gap-2 bg-blue-500 rounded-full px-4 py-2 text-white hover:bg-blue-600'
      onClick={() => alert('Hey!')}
    >
      {children}
      {icon}
    </Component>
  );
}

// component.tsx
import { BoardIcon } from '@icons/outline';
import { Button } from './button';

export default async function Home() {
  return (
    <Button icon={<BoardIcon />} asChild>
      <div>Test</div>
    </Button>
  );
}

The Solution: The Slottable Marker

We need a way to "mark" the specific child that should receive the Slot's properties. We do this by creating a tiny utility component called Slottable. It doesn't do anything on its own; it simply acts as a lighthouse for our Slot engine.

Just like we used a factory for our Slot, we use a factory for the Slottable marker. This allows us to maintain a naming convention that links the two components together.

// Use a symbol as unique identifier and to ensure there are zero 
// collisions with other libraries or user-defined properties
const SLOTTABLE_ID = Symbol('SLOTTABLE_ID');

export function createSlottable(ownerName: string) {
  const Slottable = ({ children }: { children: React.ReactNode }) => (
    <>{children}</>
  );

  Slottable.displayName = `${ownerName}.Slottable`;
  Slottable.__id = SLOTTABLE_ID;

  return Slottable;
}

function isSlottable(
  child: any,
): child is React.ReactElement<SlotProps, typeof Slottable> {
  return (
    React.isValidElement(child) &&
    typeof child.type === 'function' &&
    '__id' in child.type &&
    (child.type as any).__id === SLOTTABLE_ID
  );
}

💡 Tip: Type Predicates for robust identification

You’ll notice our isSlottable function uses a specific TypeScript syntax: child is React.ReactElement. This is known as a Type Predicate.
By using a Type Predicate combined with our unique SLOTTABLE_ID, we achieve two critical things:

Runtime Certainty: We ensure that the component we are about to clone is definitely our Slottable marker and not just a random div or a third-party component that happens to have a similar structure.

Compile-Time Safety: Once this function returns true, TypeScript "narrows" the type. This means inside our if block, the compiler knows exactly what properties are available on the child, allowing us to access child.props.children without using unsafe type assertions (like as any).

Integrating it into the Slot Logic

With our isSlottable helper ready, we can now integrate it into the createSlot factory. This allows the Slot to scan its children, identify the 'real' element intended for cloning, and correctly re-map siblings like icons or labels.:

function createSlot(ownerName: string) {
  const SlotClone = createSlotClone(ownerName);

  const Slot = ({ children, ...slotProps }: SlotProps) => {
    // Look for our Slottable component
    const childrenArray = React.Children.toArray(children);
    const slottable = childrenArray.find(isSlottable);

    if (slottable) {
      // The 'newElement' is the actual component 
      // wrapped inside the <Slottable> marker
      const newElement = slottable.props.children;

      const newChildren = childrenArray.map((child) => {
        if (child === slottable) {
      // Instead of rendering the Slottable or the newElement here, 
          // we only return the newElement's children
          // This avoids duplicating the element when we clone it later
          return React.isValidElement(newElement)
            ? (newElement.props as { children: React.ReactNode }).children
            : null;
        }
        return child;
      });

      // Clone the newElement, but inject the 'newChildren'
      // (which now includes the original siblings) back into it
      return (
        <SlotClone {...slotProps}>
          {React.isValidElement(newElement)
            ? React.cloneElement(newElement, undefined, newChildren)
            : null}
        </SlotClone>
      );
    }

    return <SlotClone {...slotProps}>{children}</SlotClone>;
  };

  Slot.displayName = `${ownerName}.Slot`;
  return Slot;
}

// Create and export the Slottable component
export const Slottable = createSlottable('Slottable');

Putting it into Practice: The Polymorphic Button

Now that we have built the Slot and Slottable infrastructure, let's look at how this simplifies our daily development. We can create a single Button component that adapts to its context without messy conditional logic.

1. The Button Component

Notice how we use the asChild prop to determine whether to render our custom Slot or a native button. We also use the Slottable marker to ensure that even when the button is swapped for a link, our internal layout remains stable.

// button.tsx
import React from 'react';
import { createSlot, createSlottable } from '../slot';

const Slot = createSlot('Button');
const Slottable = createSlottable('Button');

interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  asChild?: boolean;
  icon?: React.ReactNode;
}

export function Button({ children, icon, asChild, ...props }: Props) {
  // If asChild is true, we use our Slot engine; otherwise, a native button.
  const Component = asChild ? Slot : 'button';

  return (
    <Component
      {...props}
      className="flex items-center gap-2 bg-blue-500 rounded-full px-4 py-2 text-white hover:bg-blue-600 font-semibold"
      onClick={() => alert('Logic from Button component!')}
    >
      <Slottable>{children}</Slottable>
      {icon}
    </Component>
  );
}

2. Three Implementations, One Component

Now, look at how the consumer can use this Button in three entirely different ways. Regardless of the underlying element, the CSS classes and the onClick alert will be applied to all of them.

// app.tsx
import { BoardIcon } from '@icons/outline';
import { Button } from './button';
import Link from 'next/link';

export default function Page() {
  return (
    <div className="flex flex-col gap-4">
      <Button icon={<BoardIcon />}>
        Native Button
      </Button>

      <Button asChild icon={<BoardIcon />}>
        <a href="https://google.com" target="_blank">
          External Link
        </a>
      </Button>

      <Button asChild icon={<BoardIcon />}>
        <Link href="/dashboard">
          Client-side Navigation
        </Link>
      </Button>
    </div>
  );
}

Conclusion

The Slot pattern is a super useful tool for design systems. By leveraging Type Predicates, and Symbol-based identification, we have created a component that:

Is Type-Safe: TypeScript knows exactly what is happening at every step.
Is Highly Reusable: Consumers have total control over the underlying element while the design system maintains visual and behavioral consistency.

Exploring ApplyMiddleware: How it works behind the scenes

Andrés Valdivia Cuzcano — Wed, 05 Jul 2023 16:55:43 +0000

In this post we will talk about middleware in Redux and how to make them composable, we will also explain step by step how applyMiddleware works to wrap the store's dispatch and add functionality to it.

Middleware

A middleware is just a function that allows us to wrap the store's dispatch method to add logic before and after dispatching an action.

To do this, middleware must wrap the store's dispatch method, so middleware can be composed of other functions, either other middleware or the dispatch method. This is why a middleware has the following shape:



type MiddlewareAPI = { dispatch: Dispatch, getState: () => State }

type Middleware = (api: MiddlewareAPI) => (next: Dispatch) => Dispatch

We can see that the first function receive a “store” (MiddlewareAPI) as parameter, so we can pass one as an argument. Later I will explain in detail how it works.

applyMiddleware

applyMiddleware(...middleware) is a special type of enhancer, so it is also a higher-order function, this enhancer combines all the middlewares that are passed as parameters to create a single middleware that wraps the store's dispatch method. Let's see how it chains the middleware.

For this example we will use the following three middleware:



const firstMiddleware = (store) => (next) => (action) => {
  console.log("First middleware");
  const result = next(action);
  console.log("First middlware done");
  return result;
};

const secondMiddleware = (store) => (next) => (action) => {
  console.log("Second middleware");
  const result = next(action);
  console.log("Second middlware done");
  return result;
};

const thirdMiddleware = (store) => (next) => (action) => {
  console.log("Third middleware");
  const result = next(action);
  console.log("Third middlware done");
  return result;
};

As we have seen, a middleware receives an object similar to a store and returns a function that receive the next middleware as a parameter, in order to make them composable, so we could do the following.:



import { createStore, compose } from "redux";

const store = createStore(rootReducer, initialState);

const firstChain = firstMiddleware(store)
const secondChain = secondMiddleware(store)
const thirdChain = thirdMiddleware(store)

// Compose the middlewares and add the store dispatch as last "next" parameter
const enhancedDispatch = firstChain(secondChain(thirdChain(store.dispatch)))

// Another way to do this is to use the compose function
const enhancedDispatch = compose(firstChain, secondChain, thirdChain)(newStore.dispatch)

What has been achieved by doing this is to chain the middleware and have the last middleware dispatch the action, since the latter returns the following function:



(action) => {
  console.log("Third middleware");
  // next === store.dispatch
  const result = next(action);
  console.log("Third middlware done");
  return result;
}

As the last parameter is the dispatch method, the return of the last middleware is the function we see above, this function is the value of the next parameter of the previous middleware and so on, this way we obtain an "enhanced dispatch" where the action goes through all the middleware.

The following diagram shows how the middleware composition works:

Add middleware to a store enhancer

So far we have seen how to compose the middleware and create an enhanced dispatch, so the next step is to add it to the store so that the middleware is executed every time an action is dispatched.

To do this, we going to create an applyMiddleware function that returns a store enhancer (Post about enhancer):



import { createStore, compose } from "redux";

// Receive middleware as parameter and return a store enhancer
const applyMiddleware = (...middleware) => (createStore) => {
  return (reducer, initialState, enhancer) => {
    const newStore = createStore(reducer, initialState, enhancer);

    const middlewareChain = middleware.map((middleware) =>
      middleware(newStore)
    );
    const enhancedDispatch = compose(...middlewareChain)(newStore.dispatch);

    return {
      ...newStore,
      dispatch: enhancedDispatch
    };
  };
};

// Create a store using the applyMiddleware function
const store = createStore(userReducer, initialState,
  applyMiddleware(firstMiddleware, secondMiddleware, thirdMiddleware)
);

The applyMiddleware function receives an array of middleware as parameter and returns an enhancer, which will be passed as the third parameter of the function createStore and then we pass the new store as parameter of each middleware to obtain the function that will allow us to compose each middleware ((next) => {...}) and as we saw before we pass the dispatch method as parameter of the last middleware. Finally, we return a new store whose dispatch method will be composed of all middleware.

From now on, every time an action is dispatched, the following flow will be executed.

Redux enhancer

Andrés Valdivia Cuzcano — Wed, 28 Jun 2023 13:30:29 +0000

In this blog we will talk about how an enhancer works and how it allows us to “create” a new Store Creator and "replace" the createStore function provided by Redux.

Store creator

As we know, we create a Store using the createStore function. This function takes a reducer as its first argument, and an initial state (optional) and an enhancer (also optional) as its second and third arguments, respectively. The createStore function returns a Store.




type StoreCreator = (reducer: Reducer, initialState?: State, enhancer?:Enhancer) => Store

What is an enhancer?

An enhancer is simply a higher-order function, this means that it can take functions as arguments or return a function. In this case, an enhancer takes the current StoreCreator as its argument and returns a new StoreCreator. We can represent it as follows:



type StoreEnhancer = (currentStoreCreator: StoreCreator) => StoreCreator

Let's create a dummy enhancer.



import { createStore } from "redux";

// the enhancer takes a CreateStore as argument
const dummyEnchancer = (createStore) => {
    return (reducer, state, enhancer) => {
        const store = createStore(reducer, state, enhancer)

        // and return a new Store
        return { ...store }
    }
}

const store = createStore(rootReducer, undefined, dummyEnchancer);

In the example above, we can see that we can customize the StoreCreator function as we wish. The only rule is that we must return a new StoreCreator function, which will replace the one provided by Redux.

In summary:

The enhancer must return a new Store Creator
You can add any new functionalities to the Store Creator or the Store, as we will see later
The new Store Creator must return a new Store
Add the enhancer as the last parameter to the createStore function

Examples:

1. Customize the store dispatch:



import { createStore } from "redux";

const greetEnhancer = (createStore) => {
    return (reducer, state, enhancer) => {
        // create a store
        const store = createStore(reducer, state, enhancer)

        // create a "Dispatch enhancer"
        const newDispatch = (action) => {
            const result = store.dispatch(action)
            // add some logic after dispatch any action
            console.log('Do something here :D')
            return result
        }

        return {
            ...store
            dispatch: newDispatch
        }
    }
}

const store = createStore(rootReducer, undefined, greetEnhancer);

In this example, we create a store and use its dispatcher inside a new one. This ensures that the action is dispatched and that we can add our own logic. Finally, we return the new StoreCreator, which provides a new store with the dispatcher we just created.

2. Customize the store reducer (source):



import { createStore } from "redux";

const monitorReducerEnhancer =
  createStore => (reducer, initialState, enhancer) => {

        // create an "Reducer enhancer"
    const monitoredReducer = (state, action) => {
            // add time measurement when using the store reducer
      const start = performance.now()
      const newState = reducer(state, action)
      const end = performance.now()
      const diff = round(end - start)

      console.log('reducer process time:', diff)

      return newState
    }

        // return the new Store created using the new reducer
    return createStore(monitoredReducer, initialState, enhancer)
  }

const store = createStore(rootReducer, undefined, monitorReducerEnhancer);

In the above example, we create an enhancer that contains a "new reducer" which wraps the original reducer. This allows new logic to be executed each time the reducer is used. Finally, we return the new StoreCreator that creates a store which uses the monitoredReducer as the reducer.

Entendiendo el método bind()

Andrés Valdivia Cuzcano — Sat, 05 Mar 2022 17:53:54 +0000

El método bind() se usa para crear una nueva función donde el primer parámetro es el objeto al cual se quiere hacer referencia cuando se usa la keyword this dentro de la función.

Por ejemplo, se tiene los siguiente dos objetos:

const person1 = {
    name: 'Harvey',
    age: 30,
    getData(hobby) {
        return `Hello, I'm ${this.name}, I'm ${this.age} and I like to ${hobby}`
    }
}

const person2 {
    name: 'Spencer',
    age: 24
}

Como podemos ver, el objeto student no tiene el método getData(), sin embargo, podemos hacer uso de este gracias al método bind ya que podemos pasarle como primer parámetro al objeto student, por lo que this apuntará a este objeto.

const person = {
    name: 'Harvey',
    age: 30,
    getData: function(hobby) {
        return `Hello, I'm ${this.name}, I'm ${this.age} and I like to ${hobby}`
    }
}

const student = {
    name: 'Spencer',
    age: 22
}

const getStudentData = person.getData.bind(student);

console.log(getStudentData('play videogames')); // Hello, I'm Spencer, I'm 22 and I like to play videogames

Otra forma de pasarle los parámetros necesarios a la función es usando el mismo método bind(), ya que, si bien el primer parámetro hace referencia al objeto que usaremos, a partir del segundo parámetro serán los argumentos definidos en la función original.


const getStudentData = person.getData.bind(student, 'play videogames');

console.log(getStudentData()); // Hello, I'm Spencer, I'm 22 and I like to play videogames

💡 Cuando se vea la expresión this.cualquierMetodo.bind(this) es porque se esta llamando el método de dicho objeto y para evitar perder la referencia del mismo se establece de forma explícita mediante el método bind().

Update data from IndexedDB

Andrés Valdivia Cuzcano — Tue, 04 Jan 2022 18:11:51 +0000

To update an existing data in the database, the put(item, key) method is used. However, if the requested data doesn't exist, this method creates it and inserts it in the Object Store. This method returns the key of the stored object as a result.

The method used has two parameters, the first is the object to update or insert, and the second parameter is optional and refers to the key of the object, this last parameter is only necessary when an autoincrement value is used as the key of the stored objects, since if it is not specified a new object will be created with an automatically generated key.

To update, usually the get(key) method is first used to get the stored object, then the necessary properties are updated, and finally the put(obj) method is used with the new object.

function updateStudent(key){
    const objectStore = db.transaction('students')
                          .objectStore('students');

    const request = objectStore.get(key);

    request.onsuccess = ()=> {

        const student = request.result;

        // Change the name property
        student.name = 'Fulanito';

        // Create a request to update
        const updateRequest = objectStore.update(student);

        updateRequest.onsuccess = () => {

            console.log(`Estudent updated, email: ${updateRequest.result}`)

        }
    }
}

updateStudent('andres@andres.com');

Get data from IndexedDB

Andrés Valdivia Cuzcano — Tue, 04 Jan 2022 18:05:12 +0000

There are several ways to get the stored data, each of them will be explained below:

Individual data

To get a single specific object, the get(key) method is used, to which the key of the object to be obtained is passed as a parameter.
The requested data is returned as a result of the request.

💡 This method returns undefined as a result if the stored object has an undefined value or the object doens't exist.

function getStudent(key){
    const request = db.transaction('students')
                   .objectStore('students')
                   .get(key);

    request.onsuccess = ()=> {
        const student = request.result;

        return student;
    }

    request.onerror = (err)=> {
        console.error(`Error to get student information: ${err}`)
    }
}

getStudent('andres@andres.com');

Multiple data

To get all the data from an Object Store there are two possible ways:

`getAll()`

If you want to get an array with all the data inside an Object Store, the getAll() method is used, for this use case this method has a better performance than using a cursor to go through each of the stored data, since the cursor will create an object for each stored data as the Object Store iterates. Otherwise, getAll() creates all the objects at the same time and returns the array.

function getAllStudents(){
    const request = db.transaction('students')
                   .objectStore('students')
                   .getAll();

    request.onsuccess = ()=> {
        const students = request.result;

        console.log('Got all the students');
        console.table(students)

        return students;
    }

    request.onerror = (err)=> {
        console.error(`Error to get all students: ${err}`)
    }
}

getAllStudents();

`cursor`

If you want to work with all the data stored in an Object Store independently, it is a good idea to use a cursor, which is a mechanism to iterate over multiple records based on their key.

To use a cursor, it must first be created with the openCursor() method of the objectStore object, once the request is made, the success event is handled where the result of the request is the cursor, within this result we can access the stored data or only its key. When there is no more data or a search result was not obtained, the cursor has the value of undefined. Finally, to move to the next stored data, we use the cursor's continue() method.

I find two use cases for the cursor:

When you want to work with each object of an Object Store as it is gotten.
When you want to work with the keys of each stored object, since using a cursor is more efficient than the getAll() method for this specific case.

For the example, suppose you have a method that prints the properties of each stored object called printInfo(obj):

function printStudents(){
    const request = db.transaction('students')
                      .objectStore('students')
                      .openCursor();

    request.onsuccess = ()=> {
        const cursor = request.result;

        if(cursor){
            printInfo(cursor.value);
            cursor.continue();
        }else{
            console.log('No more entries')
        }

    }
}

printStudents();

Delete data from IndexedDB

Andrés Valdivia Cuzcano — Tue, 04 Jan 2022 17:38:47 +0000

The steps to remove objects from an Object Store are similar to when they are added. First, a request to delete an object is created using the delete(key) method, and finally the events are handled as required.

function removeStudent(key){
    const request = db.transaction('students', 'readwrite')
                      .objectStore('students');
                      .delete(key);

    request.onsuccess = ()=> {
        console.log(`Student deleted, email: ${request.result}`);
    }

    request.onerror = (err)=> {
        console.error(`Error to delete student: ${err}`)
    }
}

removeStudent('andres@andres.com');

Clear

You can also remove all data stored in an Object Store with the clear() method.

function emptyStore(storeName){
    const request = db.transaction(storeName, 'readwrite')
                      .objectStore(storeName);
                      .clear();

    request.onsuccess = ()=> {
        console.log(`Object Store "${storeName}" emptied`);
    }

    request.onerror = (err)=> {
        console.error(`Error to empty Object Store: ${storeName}`)
    }
}

emptyStore('students');

Add data to IndexedDB

Andrés Valdivia Cuzcano — Tue, 04 Jan 2022 17:32:24 +0000

To add new objects to the Object Store, a request is made using the add(object) method of the objectStore obtained from the created transaction. Then the events are handled depending on what you want to do once the operation is completed.
The result of the request is the key of the added object.

// IndexedDB connection (IDBDatabase)
let db;

function createDatabase() {
    //...

    const request = window.indexedDB.open('MyDatabase', 1);

    request.onsuccess = (e) => {
        // Create DB connection
        db = request.result;
    };

    //...
}


function addStudent(student){
    const transaction = db.transaction('students', 'readwrite');

    transaction.oncomplete = function(event) {
        //...
    };

    transaction.onerror = function(event) {
      //...
    };

    const objectStore = transaction.objectStore('students');

    // Add new student
    const request = objectStore.add(student);

    request.onsuccess = ()=> {
        // request.result contains key of the added object
        console.log(`New student added, email: ${request.result}`);
    }

    request.onerror = (err)=> {
        console.error(`Error to add new student: ${err}`)
    }
}

const studentA = {
        name: 'Andres',
        lastname: 'Valdivia',
        email: 'pandres@pandres.com',
        age: 22
}

addStudent(studentA)

A short and tidy way of doing this, bearing in mind that the events of the transaction will "depend" on what happens with the request, would be:

function addStudent(student){
    const request = db.transaction('students', 'readwrite')
                                                .objectStore('students')
                                                .add(student);

    request.onsuccess = ()=> {
        console.log(`New student added, email: ${request.result}`);
    }

    request.onsuccess = (err)=> {
        console.error(`Error to add new student: ${err}`)
    }
}

const studentA = {
        name: 'Andres',
        lastname: 'Valdivia',
        email: 'pandres@pandres.com',
        age: 22
}

addStudent(studentA);

The previous example is fine if you only want to add a student each time the function is executed. However, if you want to add several students it is best to have the transaction and the objectStore separately, since the transaction will be active as long as there are requests pending and the objectStore gives us access to the "table". Also now the events of the transaction don't "depend" on the request, for example, the complete event will be fired when ALL the objects have been added. The code would look like this:

function addStudents(students){
    const transaction = db.transaction('students', 'readwrite');

    transaction.oncomplete = function(event) {
        console.log('All the students added successfully')
    };

    transaction.onerror = function(event) {
      //...
    };

    const objectStore = transaction.objectStore('students');

    for(student of students){
        const request = objectStore.add(student);

        request.onsuccess = ()=> {
            console.log(`New student added, email: ${request.result}`);
        }

        request.onsuccess = (err)=> {
            console.error(`Error to add new student: ${err}`)
        }
    }
}

const students = [
    {name: 'name1', lastname: 'lastname1',email: 'email1@email.com', age: 22},
    {name: 'name2', lastname: 'lastname2',email: 'email2@email.com', age: 24},
    {name: 'name3', lastname: 'lastname3',email: 'email3@email.com', age: 22},
    {name: 'name4', lastname: 'lastname4',email: 'email4@email.com', age: 23},
    {name: 'name5', lastname: 'lastname5',email: 'email5@email.com', age: 22}
]

addStudents(students)

Create a database with IndexedBD

Andrés Valdivia Cuzcano — Tue, 04 Jan 2022 17:11:11 +0000

Before opening (creating) a database using IndexedDB we must verify that the browser has the necessary support, for this we create a function that we will use later when creating the database:

function indexedDBSupport(){
    return 'indexedDB' in window;
}

Then we have to create a request to open the database that returns an event (success or error) through the IDBOpenDBRequest object, which will allow us to access the event.

The open(name, version) function has two parameters, the first is the name of the database that identifies it within the client's browser, the second parameter is the version of our database, this is important since it will be defined a Database Schema that will determine the structure of the objects to be stored, so if you want to change it, you just have to change the version of our database.

// The version value is 1 by default
const request = window.indexedDB.open("MyDatabase", 1);

Event handling

As mentioned above, once the request to open the database has been made, 3 events can be handled with their respective functions:

onerror: If the creation or connection to the database fails.
onsuccess: This is executed every time the database is connected or created.
onupgradeneeded: This is executed only once, when the database is created or updated, so the structure of it (Database Schema) will be defined here.

💡 Once the request is made, we obtain the IDBOpenDBRequest object, in which the result of said request is stored.

// Save the connection to the database in a global variable
// since it will later be used to carry out transactions
let db;

function createDatabase() {

    if (!indexedDBSupport()) throw new Error("Your browser doesn't support IndexedBD");

    const request = window.indexedDB.open('MyDatabase', 1);

// Event handling
    request.onerror = (e) => {
        console.error(`IndexedDB error: ${request.errorCode}`);
    };

    request.onsuccess = (e) => {
        console.info('Successful database connection');
        db = request.result;
    };

    request.onupgradeneeded = (e) => {
        console.info('Database created');
        const db = request.result;
        //...
    };

}

Using `onupgradeneeded`

As mentioned above, this event is fired when the database is created for the first time or when its version is updated, so it is the ideal place to specify the Database Schema.

Creating an Object Store (table)

We must define where the objects will be stored for the current version of our database. For this we create an instance of IDBObjectStore (represents an object store) using the createObjectStore(name, options) method, which has the following parameters:

name: Name of the Object Store
options: Optional parameter that contains the following attributes:
- keypath: Specifies the name of the attribute that will contain the index with which it will identify each object.
- autoIncrement: If the value is true, an incremental value will be given to the keyPath.

//...

request.onupgradeneeded = (e) => {

    console.info('Database created');

    const db = request.result;

    const objectStore = db.createObjectStore('student', {keyPath: 'email'})
};

//...

💡 If you want to update the Object Store, bear in mind that it will have the new structure, but it will be empty, so is a good idea that, before creating the new Object Store, save the objects in another place and then delete the old Object Store and reinsert them into the new one.

Creating Indexes (fields or attributes)

To create “fields” (index) in a "table" (Object Store), use the createIndex(indexName, keyPath, options) method of the IDBObjectStore object, which has the following parameters:

indexName: It is the name by which the "field" is identified within the table.
keyPath: It is the property of the object that will contain the value of the field. Most of the time the indexName and the keyPath have the same value, since it makes sense that the field is called the same as the property that will contain its value.
options: The most useful property is unique which does not allow duplicate values within the same index.

//...

request.onupgradeneeded = (e) => {

    console.info('Database created');

    const db = request.result;

    const objectStore = db.createObjectStore('student', {keyPath: 'email'});

    // Indexes
    objectStore.createIndex("email", "email", { unique: true });
    objectStore.createIndex("name", "name", { unique: false });
    objectStore.createIndex("lastname", "lastname", { unique: false });
    objectStore.createIndex("age", "age", { unique: false });

};

//...

As it works based on requests, we can use the complete event to verify that the transaction was completed and the Object Store was created successfully to perform some action later, if necessary.

//...

request.onupgradeneeded = (e) => {

    console.info('Database created');

    const db = request.result;

    const objectStore = db.createObjectStore('student', {keyPath: 'email'});

    // Indexes
    objectStore.createIndex('email', 'email', { unique: true });
    objectStore.createIndex('name', 'name', { unique: false });
    objectStore.createIndex('lastname', 'lastname', { unique: false });
    objectStore.createIndex('age', 'age', { unique: false });

    // Transaction completed
    objectStore.transaction.oncompleted = (e)=> {
        console.log('Object store "student" created');
    }

};

//...

IndexedDB: Step by step

Andrés Valdivia Cuzcano — Tue, 04 Jan 2022 15:56:06 +0000

Before starting, I want to tell you that this post will try to explain in the simplest way what IndexedBD is and how it works. Therefore, to maintain order there will be links to other posts where the steps for creating a database in IndexedDB will be explained in detail.
Without further ado, I hope it will be very helpful.

What is IndexedDB?

To put it simply, IndexedDB is an API for client-side storage. Although there is a Web Storage API (sessionStorage and localStorage), it is not very useful when we have to store large amounts of data mantainnig a certain structure.

This database system works off transaction (we will talk about this later) and is object-oriented.

An important aspect is that the transactions are asynchronous and work under the concept of requests that are linked to the operations to be executed and returns an event once they are resolved.

In short, IndexedDB is a transactional database system that stores structured information within a browser.

Creating a Database

When starting with this database system it is necessary to open a connection, then specify the Database Schema that it will have, this refers to the structure of the objects that will be stored, and finally, carry out the desired transactions. One of the most noteworthy advantages of IndexedDB is that, being independent of whether there is internet connection or not, the application can work both online and offline.

The following post explains the creation of a database with IndexedDB to persist the data in users' browsers.

Create a database with IndexedDB

Transactions

Before carrying out any operation on the database (add, delete, get, put) it is necessary to create a transaction, since it will specify which "tables" (Object Stores) will be part of the transaction, as well as the type of access that will be used to perform the transaction, for this the transaction(storeNames, mode) method of the IDBDatabase object is used, so the connection created previously is used.

Summary of the previous chapter:

// Database connection (IDBDatabase)
let db;

function createDatabase() {
    //...

    const request = window.indexedDB.open('MyDatabase', 1);

    request.onsuccess = (e) => {
        // Create the DB connection
        db = request.result;
    };

    //...
}

// Create a transaction
const transaction = db.transaction('students', 'readonly');

//...

The transaccion(storeNames, mode) method has the following parameters:

storeNames: This parameter refers to the Object Stores (tables) that are part of the transaction, the value is an array with their names. However, if only one Object Store will be used, the value can be a string.
mode: This parameter indicates the type of access that will be used to carry out the transaction, this can be readonly (default) or readwrite.

Finally, the transaction returns an object that contains the objectStore(storeName) method which is used to access to each Object Store (table) and carry out the respective operations.

// Database connection (IDBDatabase)
let db;

function createDatabase() {
    //...

    const request = window.indexedDB.open('MyDatabase', 1);

    request.onsuccess = (e) => {
        // Create the DB connection
        db = request.result;
    };

    //...
}

// Create a transaction
const transaction = db.transaction('students', 'readonly');

transaction.oncomplete = function(event) {
  // This event will be executed when
  // the transaction has finished
};

transaction.onerror = function(event) {
  // Handling Errors
};

// Access to the "students table"
const objectStore = transaction.objectStore('students');
//...

Actualizando datos de la BD

Andrés Valdivia Cuzcano — Tue, 04 Jan 2022 02:03:43 +0000

Para actualizar un dato existente en la base de datos se usa el método put(item, key), sin embargo, si el dato solicitado no existe este método lo crea e inserta en el Object Store correspondiente. Este método devuelve como resultado el key del elemento almacenado.

El método usado recibe dos parámetros, donde el primero es el objeto a actualizar o insertar, y el segundo parámetro es opcional y hace referencia al key del objeto, este último parámetro solo es necesario cuando se usa un valor autoincrement como la key de los objetos almacenados, ya que si no se especifica se creará un objeto nuevo con un key generado automáticamente.

Para actualizar, usualmente primero se usa el método get(key) para obtener el objeto almacenado, luego actualizar las propiedades necesarias y finalmente se usa el método put(obj) con el nuevo objeto.

function updateStudent(key){
    const objectStore = db.transaction('students')
                          .objectStore('students');

    const request = objectStore.get(key);

    request.onsuccess = ()=> {

        const student = request.result;

        // Cambiamos el nombre
        student.name = 'Fulanito';

        // Creamos otro request para actualizar
        const updateRequest = objectStore.update(student);

        updateRequest.onsuccess = () => {

            console.log(`Estudiante acutalizado, correo: ${updateRequest.result}`)

        }
    }
}

updateStudent('andres@andres.com');

Obtener datos de la BD

Andrés Valdivia Cuzcano — Tue, 04 Jan 2022 02:00:24 +0000

Existen variar formas de obtener los datos almacenados, a continuación se explicarán cada uno de ellos:

Dato individual

Para obtener un solo dato (object) específico se usa el método get(key), al cual se le pasa como parámetro el key del objeto a obtener.
El dato solicitado es devuelto como resultado de la petición.

💡 Este método devuelve undefined como resultado si el dato almacenado tiene el valor de undefined o no existe.

function getStudent(key){
    const request = db.transaction('students')
                   .objectStore('students')
                   .get(key);

    request.onsuccess = ()=> {
        const student = request.result;

        return student;
    }

    request.onerror = (err)=> {
        console.error(`Error to get student information: ${err}`)
    }
}

getStudent('andres@andres.com');

Multiples datos

Para obtener todos los datos de de un Object Store hay dos posibles caminos:

`getAll()`

Si se desea obtener un arreglo con todos los datos dentro de un Object Store, se usa el método getAll(), para este caso de uso este método tiene un mejor rendimiento que usar un cursor para recorrer por cada uno de los datos almacenados, ya que este ultimo tendrá que crear un objeto por cada dato almacenado conforme va iterando el Object Store, mientras que getAll() crea todos los objetos a la misma vez y devuelve el arreglo.

function getAllStudents(){
    const request = db.transaction('students')
                   .objectStore('students')
                   .getAll();

    request.onsuccess = ()=> {
        const students = request.result;

        console.log('Got all the students');
        console.table(students)

        return students;
    }

    request.onerror = (err)=> {
        console.error(`Error to get all students: ${err}`)
    }
}

getAllStudents();

`cursor`

Si se desea trabajar con todos los datos almacenados en un Object Store de forma independiente, es buena idea el uso de un cursor, el cual es un mecanismo para iterar sobre múltiples registros en base a su key.

Para usar un cursor primero debe crearse con el método openCursor() del objeto objectStore, una vez hecho el request se maneja el evento success donde el resultado del request es el cursor, dentro de este resultado podemos acceder al dato almacenado o solo a su key. Cuando no hay más datos o no se obtuvo un resultado en la búsqueda el cursor tiene el valor de undefined. Finalmente, para pasar al siguiente dato almacenado se usa el método continue() del cursor.

Personalmente le encuentro dos casos de uso para el cursor:

Cuando se desea trabajar con los datos de un Object Store conforme estos se van obteniendo.
Cuando se trabaje con los keys de cada objeto almacenado, ya que es usar un cursor es más eficiente que el método getAll() para este caso en específico.

Para el ejemplo, supongamos que tenemos un método que imprime las propiedades de cada objeto almacenado llamado printInfo(obj):

function printStudents(){
    const request = db.transaction('students')
                   .objectStore('students')
                   .openCursor();

    request.onsuccess = ()=> {
        const cursor = request.result;

        if(cursor){
            printInfo(cursor.value);
            cursor.continue();
        }else{
            console.log('No more entries')
        }

    }
}

printStudents();

DEV Community: Andrés Valdivia Cuzcano

asChild: Understanding the Slot Pattern in React

What is a Slot?

Building the Foundation

Combining Refs

Merging Props

The Transformation: Cloning the Child

How it works

Key Benefits of this Approach:

Putting it Together: The Public Slot API

Why this separation matters

The "Slottable" Component: Handling Complex Content

The Solution: The Slottable Marker

Integrating it into the Slot Logic

Putting it into Practice: The Polymorphic Button

1. The Button Component

2. Three Implementations, One Component

Conclusion

Exploring ApplyMiddleware: How it works behind the scenes

Middleware

applyMiddleware

Add middleware to a store enhancer

Redux enhancer

Store creator

What is an enhancer?

Examples:

1. Customize the store dispatch:

2. Customize the store reducer (source):

Entendiendo el método bind()

Update data from IndexedDB

Get data from IndexedDB

Individual data

Multiple data

getAll()

cursor

Delete data from IndexedDB

Clear

Add data to IndexedDB

Create a database with IndexedBD

Event handling

Using onupgradeneeded

Creating an Object Store (table)

Creating Indexes (fields or attributes)

IndexedDB: Step by step

What is IndexedDB?

Creating a Database

Transactions

Actualizando datos de la BD

Obtener datos de la BD

Dato individual

Multiples datos

getAll()

cursor

`getAll()`

`cursor`

Using `onupgradeneeded`

`getAll()`

`cursor`