Nemo's Parental Misguidance

    watchable-stores
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.2 • Public • Published

    watchable-stores

    Data model with observer / observable pattern for front-end purpose.

    The lib is very easy to use :

    dashboard view

    We can define an interface to represent the data stored in the Store (here: IUserData).

    Then, we create our store, by instanciating a new class extending WatchableStore. In the constructor, we have to invoke the super method, it will pass the content as initial data to our store.

    WatchableStore provides us 2 methods :

    • watch(cb: (data: IUserData) => any): number;
    • unwatch(id: number): void;

    Here are how we can use it.

    dashboard view dashboard view

    Our first class is a React class that just render a text input. The second one displays the list of users.

    In the first one, when we click on the "Add user" button, it will trigger the function addUser of our store. By doing this, all the components listening our store will be notified that the data has been updated. It means that our second class "UserList" will be able to manage the new users.

    /!\ Do not forget to unwatch the store when you destroy your component.

    Install

    npm i watchable-stores

    DownloadsWeekly Downloads

    1,492

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    29.2 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar