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 🙏

© 2024 – Pkg Stats / Ryan Hefner

entity-state-adapter

v0.1.4

Published

reactjs implementation of entity state adapter

Downloads

7

Readme

Entity-state-adapter

Entity State adapter for managing record collections (based on @ngrx/entitywork with redux and useReducer hooks

Entity-state-adapter provides an API to manipulate and query entity collections.

Reduces boilerplate for creating reducers that manage a collection of models. Provides performant CRUD operations for managing entity collections. Extensible adapters for selecting entity information.

usage

Installation

npm i entity-state-adapter

or

yarn add entity-state-adapter

The initialisation

import { createEntityAdapter } from "entity-state-adapter";

export function selectUserId(a) {
    //In this case this would be optional since primary key is id
    return a.id;
}

export function sortByName(a, b): number {
    return a.name.localeCompare(b.name);
}

export const adapter = createEntityAdapter({
    selectId: selectUserId,
    sortComparer: sortByName
});

Adapter Collection Methods

The entity adapter also provides methods for operations against an entity. These methods can change one to many records at a time. Each method returns the newly modified state if changes were made and the same state if no changes were made.

  • addOne: Add one entity to the collection
  • addMany: Add multiple entities to the collection
  • addAll: Replace current collection with provided collection
  • removeOne: Remove one entity from the collection
  • removeMany: Remove multiple entities from the collection, by id or by predicate
  • removeAll: Clear entity collection
  • updateOne: Update one entity in the collection
  • updateMany: Update multiple entities in the collection
  • upsertOne: Add or Update one entity in the collection
  • upsertMany: Add or Update multiple entities in the collection
  • map: Update multiple entities in the collection by defining a map function, similar to Array.map

The initialState is always required and must be create with adapter.getInitialState({otherState: optional})

export const userInitialState = adapter.getInitialState({});

const [users, dispatch] = useReducer(
    userReducer,
    userInitialState,
    state => state
);

And the reducer

export function userReducer(state, action) {
    switch (action.type) {
        case ADD_ALL:
            return adapter.addMany(action.payload.users, state);

        case ADD_ONE:
            return adapter.addOne(action.payload.user, state);

        case UPSERT_ONE:
            return adapter.upsertOne(action.payload.user, state);

        case UPSERT_ALL:
            return adapter.upsertUsers(action.payload.users, state);
        case UPDATE_ONE:
            return adapter.updateOne(action.payload.user, state);

        case UPDATE_ALL:
            return adapter.updateMany(action.payload.users, state);

        case MAP_ALL:
            return adapter.map(action.payload.entityMap, state);

        case DELETE_ONE:
            return adapter.removeOne(action.payload.id, state);

        case DELETE_ALL_BY_IDS:
            return adapter.removeMany(action.payload.ids, state);

        case DELETE_ALL_BY_PREDICAT:
            return adapter.removeMany(action.payload.predicate, state);

        case CLEAR_SELECTED_USER:
            return adapter.removeAll({ ...state, selectedUserId: null });

        default:
            return state;
    }
}

Paix et Guerisons - with 💘 Thony