npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

delux

v1.5.2

Published

Beautiful, light and simple state manager inspired by Redux

Downloads

3

Readme

Beautiful, light and simple state manager inspired by Redux

import Store, { Collection } from 'delux';

let store = new Store ();

store.tasks = new Collection ({tasks: []});

store.tasks.on('addTask', (tasks, action) => tasks.concat({
    name: action.payload,
    completed: false
}));

store.subscribe('tasks', (state) => console.log(state.tasks));

store.dispatch({
    type: 'addTask',
    payload: 'Try Delux'
});

Motivation

  • In Flux there's a design flaw: it's hard to manage several stores.
  • So came Redux with one store.
  • But: Redux lacks a defined API

Features

API Reference

Store

The Store holds the whole application state and it's mutation logic.

Create a Store
let store = new Store();

Description

Stores are objects whose prototype has methods to mutate there state. The Store's state is hold in Collections assigned to it.

Store instances

Properties
Store.prototype.state

Object with mutations of the collections' states.

Methods
Store.prototype.dispatch()

Dispatches a Flux Standard Action on the state.

store.dispatch({
    type: <string | symbol>,
    payload: <object>
    error: <boolean>,
    meta: <any>
});

Returns

A promise which resolves to the the mutated store state.

Store.prototype.subscribe()

Adds an subscriber for mutations in the store's collections

store.subscribe(['collectionName'], (state) => {

});

Parameters

  • names | name - array of collection names or a single name to subscribe for state mutation
  • subscriber - a function that with a given state mutation receives the name of the changed collection and it's new state. The arguments to the function are as follows:

| Name | Supplied Value | |------------|----------------------------- | | state | Store.prototype.state alias |

Store.prototype.use()

Adds a middlware to the action resolution process

store.use(middleware|type|{type: middleware}, <middleware>);

Parameters

  • middlware - a function that mutates a given action. If it returns a Promise the store will wait for the promise to complete before passing it to the next middleware and the reducers.

  • type - action type to apply middleware on.

Store.prototype.queue()

Adds a function to the store's execute queue

store.queue(() => callback());
Store.prototype.state.get()

Get specific collection's state from the store's state

let partialState = store.state.get(collectionNames);
Parameters

Collection

Collections holds a sub-state (similar to Flux Stores) and it's mutation logic

Assign a Collection

store.collectionName = new Collection (init);

Parameters

  • init - The initial state of the collection

Collection instances

Properties
Collection.prototype.state

Reflects the collections's state

Collection.prototype.reducers

Reflects the collections's reducers

Collection.prototype.subscribers

Reflects the collections's subscribers

Methods
Collection.prototype.on()

Attach a reducer to received actions (Node style)

store.collectionName.on(['actionType'], (state, action) => {

});

Parameters

  • types | type - array of action types or a single type to apply the reducer on
  • reducer - a function that with a given action mutates the collection state and returns the new state. The arguments to the function are as follows:

| Name | Supplied Value | |--------|-----------------------| | state | The collection state | | action | The dispatched action |