DEV Community: Ashok

Building a Reactive Store in React Using the Observer Design Pattern and Custom Hook

Ashok — Sat, 17 Aug 2024 12:52:21 +0000

In modern React development, managing state across components can be challenging, especially when you want to keep different components in sync with shared state. One effective solution to this problem is using the Observer Design Pattern combined with a custom hook in React. In this article, we'll walk through how to implement a simple reactive store using the Observer pattern and leverage it in a React application.

Step 1: Implementing the ObserverPattern Class

The Observer Pattern is a behavioral design pattern where an object (known as the subject) maintains a list of its dependents (observers) and notifies them of any state changes. Here’s how we can implement it in JavaScript:

class ObserverPattern {
    constructor(initialState = {}) {
        this.state = initialState;
        this.observers = [];
    }

    subscribe(event) {
        this.observers.push(event);
    }

    notify() {
        this.observers.forEach(observer => observer(this.state));
    }

    setState(newState) {
        this.state = { ...this.state, ...newState };
        this.notify();
    }

    getState() {
        return this.state;
    }

    unsubscribe(event) {
        this.observers = this.observers.filter(observer => observer !== event);
    }
}

const Store = new ObserverPattern({ count: 10 });

export default Store;

Explanation:

State Management: The ObserverPattern class holds the state in the state object and provides methods to update (setState) and access (getState) this state.
Observer List: The observers array stores the functions that should be called whenever the state changes.
Notify Method: The notify method iterates over all observers and triggers them with the current state, ensuring that any subscribed component gets updated.
Unsubscribe Method: This method removes a specific observer from the list to avoid memory leaks.

Step 2: Creating a Custom Hook for React Components

The next step is to create a custom hook, useStore, that allows React components to interact with our ObserverPattern store.

import { useEffect, useState } from "react";
import Store from "./customhook";

const useStore = (selector) => {
    const [state, setState] = useState(selector(Store.getState()));

    useEffect(() => {
        const event = (newState) => {
            setState(selector(newState));
        };

        Store.subscribe(event);

        return () => {
            Store.unsubscribe(event);
        };
    }, [selector]);

    return state;
};

export default useStore;

Explanation:

Selector Function: The useStore hook accepts a selector function to pick specific parts of the state. This makes it flexible and efficient by only updating when the selected state changes.
State Synchronization: The hook initializes local state with the selected part of the store’s state. When the store’s state changes, the hook updates the component’s state, triggering a re-render.
Effect Hook: The useEffect hook handles subscribing to the store on mount and unsubscribing on unmount, ensuring that the component stays in sync with the store while avoiding memory leaks.

Step 3: Using the Store in React Components

Now, let's see how we can use this custom hook within React components to manage and display the state.

Parent Component:
The Parent component provides a button to increment the count state in the store.

import Store from "./customhook";

const Parent = () => {
    let count = Store.getState().count;
    const increase = () => {
        ++count;
        Store.setState({ count });
    }

    return (
        <>
            <button onClick={increase}>Increase</button>
        </>
    );
}

export default Parent;

Child Components:
Both ChildComponentOne and ChildComponentTwo subscribe to the count state using the useStore hook.

import useStore from "./customhook"; // custom hook

const ChildComponentOne = () => {
    const count = useStore(state => state.count);

    return (<>ChildComponentOne = {count}</>)
}

export default ChildComponentOne;

import useStore from "./customhook";

const ChildComponentTwo = () => {
    const count = useStore(state => state.count);

    return (<>ChildComponentTwo = {count}</>)
}

export default ChildComponentTwo;

Explanation:

Parent Component: The Parent component manages the increase function, which increments the count and updates the store. Both child components are rendered below the button.
Child Components: These components are connected to the store via the useStore hook. Whenever the count state in the store changes, they automatically re-render to reflect the new value.

Conclusion

By leveraging the Observer Design Pattern and custom hooks, you can create a powerful and flexible state management solution in React. This approach allows you to easily keep multiple components in sync without relying on more complex state management libraries. The separation of concerns between state management and UI components also makes the code more maintainable and reusable.

Feel free to adapt this pattern to suit your project’s needs, and enjoy the reactive power of your new custom store in React!

🚀🚀 Integrating the PubSub Pattern in Vue 3 🚀🚀

Ashok — Thu, 15 Aug 2024 08:43:44 +0000

As Vue.js applications grow, managing communication between components can become complex. A powerful solution to decouple components and manage event-driven communication is the Publish-Subscribe (PubSub) pattern. By integrating this pattern into Vue.js, you can create a flexible and maintainable way to handle events across your application.

What is the PubSub Pattern?

The PubSub pattern allows components to publish events that other components can subscribe to. This decouples components, making your application more modular and easier to manage. Using PubSub, you can trigger actions or update states in one component based on events in another without needing direct parent-child communication.

Implementing the PubSub Pattern in Vue.js

Let’s walk through how to implement the PubSub pattern in a Vue.js application using a simple, reusable event bus.

Step 1: Create a PubSub Event Bus
In Vue.js, you can create a simple event bus using Vue’s provide and inject APIs or by creating a standalone PubSub object.

// pubsub.js
export const PubSub = {
    subscribers: new Map(),

    subscribe(event, subscriber) {
        if (!this.subscribers.has(event)) {
            this.subscribers.set(event, []);
        }
        this.subscribers.get(event).push(subscriber);
    },

    unsubscribe(event, subscriber) {
        if (this.subscribers.has(event)) {
            const updatedSubscribers = this.subscribers.get(event).filter(sub => sub !== subscriber);
            if (updatedSubscribers.length > 0) {
                this.subscribers.set(event, updatedSubscribers);
            } else {
                this.subscribers.delete(event);
            }
        }
    },

    publish(event, payload) {
        if (this.subscribers.has(event)) {
            this.subscribers.get(event).forEach(subscriber => {
                subscriber(payload);
            });
        }
    }
};

Step 2: Using PubSub in Vue Components

Now that you have your PubSub event bus, you can use it in your Vue components to subscribe to events, publish events, and unsubscribe when the component is destroyed.

Component-1

<template>
  <div>SubscriberComponent-1 {{ count }}</div>
</template>

<script  setup>
import { onMounted, ref } from "vue";
import { PubSub } from "./pubsub.js";

const count = ref(0);

const event = (payload) => {
  console.log("Received payload:", payload);
  count.value = payload;
};

onMounted(() => {
  PubSub.subscribe("myEvent", event);
});
</script>

Component-2

<template>
  <div>SubscriberComponent-2 {{ count }}</div>
</template>

<script  setup>
import { onMounted, ref } from "vue";
import { PubSub } from "./pubsub.js";

const count = ref(0);

const event = (payload) => {
  console.log("Received payload:", payload);
  count.value = payload;
};

onMounted(() => {
  PubSub.subscribe("myEvent", event);
});
</script>

Publishing an Event:

<template>
  <div>PublisherComponent <button @click="publishEvent">post</button></div>
</template>

<script  setup>
import { PubSub } from "./pubsub.js";

let count = 1;

const publishEvent = () => {
  ++count;
  PubSub.publish("myEvent", { message: `Hello, PubSub! ${count}` });
};
</script>

Why Use the PubSub Pattern in Vue.js?

Decoupling: The PubSub pattern helps to decouple components, making your application more modular and easier to maintain.
Event-Driven Architecture: It enables an event-driven approach, where components can react to events without being directly connected.
Flexibility: The PubSub pattern allows you to manage events across different parts of your application without the need for complex prop drilling or state management.

Conclusion

By integrating the PubSub pattern into Vue.js, you can manage communication between components more effectively, leading to a cleaner, more modular application architecture. This pattern is particularly useful for large applications where components need to communicate frequently without becoming tightly coupled.

Feel free to use this approach in your own Vue.js projects, and adapt it to suit your needs. Happy coding!

🚀🚀 Integrating the PubSub Pattern in React with a Custom Hook 🚀🚀

Ashok — Thu, 15 Aug 2024 08:11:05 +0000

In modern React applications, managing communication between components can be challenging, especially as your project scales. A common solution to decouple components and manage event-driven communication is the Publish-Subscribe (PubSub) pattern. By integrating this pattern as a custom hook in React, you can create a flexible and powerful way to handle events across your application.

What is the PubSub Pattern?
The PubSub pattern is a design pattern that allows components to publish events and other components to subscribe to those events. This decouples the components, making your application more modular and easier to manage. With PubSub, you can trigger actions or update states in one component based on events in another, without direct prop passing or tightly coupling your components.

Implementing the PubSub Pattern as a Custom Hook in React
Here's how you can integrate the PubSub pattern into a React application by creating a custom hook.

Step 1: Create the usePubSub Hook

First, we define the usePubSub hook, which will provide the functionality to subscribe to events, publish events, and unsubscribe when a component unmounts.

import { useEffect, useRef } from 'react';

const PubSub = {
    subscribers: new Map(),

    subscribe: function (event, subscriber) {
        if (!this.subscribers.has(event)) {
            this.subscribers.set(event, []);
        }
        this.subscribers.get(event).push(subscriber);
    },

    unsubscribe: function (event, subscriber) {
        if (this.subscribers.has(event)) {
            const subscribers = this.subscribers.get(event).filter(sub => sub !== subscriber);
            this.subscribers.set(event, subscribers);
        }
    },

    publish: function (event, payload) {
        if (this.subscribers.has(event)) {
            this.subscribers.get(event).forEach(subscriber => {
                subscriber(payload);
            });
        }
    }
};

export const usePubSub = (event, handler) => {
    const handlerRef = useRef();

    useEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    useEffect(() => {
        const eventHandler = (payload) => handlerRef.current(payload);
        PubSub.subscribe(event, eventHandler);

        return () => {
            PubSub.unsubscribe(event, eventHandler);
        };
    }, [event]);

    const publish = (payload) => {
        PubSub.publish(event, payload);
    };

    return publish;
};

Step 2: Using the usePubSub Hook in Your Components

You can create multiple SubscriberComponent and get the message from the PublisherComponent.

import React from 'react';
import { usePubSub } from './usePubSub';

const SubscriberComponent = () => {
    usePubSub('myEvent', (payload) => {
        // using this event you can do the actions
        console.log('Received payload:', payload);
    });

    return <div>Subscribed to myEvent</div>;
};

export default SubscriberComponent;

Publishing an Event:

import React from 'react';
import { usePubSub } from './usePubSub';

const PublisherComponent = () => {
    const publish = usePubSub('myEvent',()=>{});

    const handleClick = () => {
        publish({ message: 'Hello, PubSub!' });
    };

    return <button onClick={handleClick}>Publish Event</button>;
};

export default PublisherComponent;

Why Use the PubSub Pattern in React?

Decoupling: The PubSub pattern helps to decouple components, making your application more modular and easier to maintain.
Event-Driven Architecture: It enables an event-driven approach, where components can react to events without being directly connected.
Flexibility: With the usePubSub hook, you can easily manage events across different parts of your application without needing to pass props or manage complex state hierarchies.

Conclusion
By integrating the PubSub pattern into React as a custom hook, you can manage communication between components more effectively. This approach allows for a cleaner, more modular application architecture, making your React projects easier to scale and maintain.

Feel free to use this pattern in your own projects and adapt it to fit your specific needs. Happy coding!

Understanding the PubSub (Publish-Subscribe) Design Pattern in JavaScript

Ashok — Wed, 14 Aug 2024 11:42:55 +0000

The Publish-Subscribe (PubSub) pattern is a popular design pattern used to facilitate communication between different parts of an application without them needing to know about each other directly. This pattern is especially useful for decoupling components in large-scale applications, where events can be published and subscribers can react to these events.

In this article, we'll explore how to implement the PubSub pattern in JavaScript using both an object-based approach and a class-based approach. By the end, you'll have a solid understanding of how to use this pattern in your own projects.

Object-Based Implementation
The object-based approach is simple and effective for scenarios where a single global event manager is sufficient. Here's how you can implement it:

pubsub.js
const PubSub = {
    subscribers: [],

    subscribe: function(subscriber) {
        this.subscribers.push(subscriber);
    },

    publish: function(payload) {
        this.subscribers.forEach(subscriber => {
            subscriber(payload);
        });
    }
};

export default PubSub;

How to Use the Object-Based PubSub
In your application, you can import the PubSub object wherever you need it. Here’s an example:

// file1.js
import PubSub from './pubsub';

PubSub.subscribe((payload) => {
    console.log('File 1 received:', payload);
});

// file2.js
import PubSub from './pubsub';

PubSub.subscribe((payload) => {
    console.log('File 2 received:', payload);
});

// main.js
import PubSub from './pubsub';

PubSub.publish('Hello from main!');

Class-Based Implementation
For more flexibility or when you need multiple instances of a PubSub system, a class-based approach can be used. This allows you to create independent PubSub instances with their own list of subscribers.

class PubSub {
    constructor() {
        this.subscribers = [];
    }

    subscribe(subscriber) {
        this.subscribers.push(subscriber);
    }

    unsubscribe(subscriber) {
        this.subscribers = this.subscribers.filter(sub => sub !== subscriber);
    }

    publish(payload) {
        this.subscribers.forEach(subscriber => {
            try {
                subscriber(payload);
            } catch (error) {
                console.error('Error in subscriber:', error);
            }
        });
    }
}

export default PubSub;

How to Use the Class-Based PubSub
Here's an example of how you can use the class-based PubSub pattern in your application:

import PubSub from './pubsub';

// Create an instance of PubSub
const pubSubInstance = new PubSub();

// Subscribe to events
pubSubInstance.subscribe((payload) => {
    console.log('Instance 1 received:', payload);
});

pubSubInstance.subscribe((payload) => {
    console.log('Instance 2 received:', payload);
});

// Publish an event
pubSubInstance.publish('Hello from instance!');

Conclusion
The PubSub pattern is a powerful tool for managing communication between different parts of your application. Whether you choose to use an object-based or class-based implementation depends on your specific needs. The object-based approach is simple and straightforward, ideal for smaller projects or when a single global event manager is sufficient. On the other hand, the class-based approach offers more flexibility and is better suited for larger applications where you may need multiple instances of the PubSub system.

Feel free to use these examples in your own projects and modify them to suit your needs. Happy coding!