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

@uas-tech/crud-reducer

v1.0.0

Published

Redux Reducer to handle CRUD actions

Downloads

2

Readme

Crud Reducer

Installation and Usage

To add this package to your application run:

npm i @uas-tech/crud-reducer

To use the crud reducer import it into any file with:

import { crudReducer } from '@uas-tech/crud-reducer';

Then to implement the crud reducer, combine it with your own reducer:

function siblingReducer(state = INITIAL_REDUCER_STATE, action) {
  switch (action.type) {
    case 'TEST_ACTION':
      return {};
    default: return state;
  }
}

export const myReducer = crudReducer('REDUCER', reducer);

Write your own custom reducer to replace siblingReducer in this example. It will be appended to the end of the crud reducer. Replace 'REDUCER' with a string identifying the type of object that will have crud actions performed on it. i.e. 'COUNTRY', 'STATE', or 'CITY'

Crud Epic

To use crud epics to make http requests import the service into your module:

import { CrudService } from '@uas-tech/crud-reducer';

Then add the CrudService to the providers array:

providers: [
  CrudService 
]

Then, we must supply 3 items to the CrudService: the actions, apiRoute, and routes. We do this in the same location where we provide the CrudService by calling the provideValues function:

this.crudService.provideValues(
  [
    'ACTION_NAME',
    'OTHER_ACTION'
  ],
  'your-api-route',
  {
    'ACTION_NAME': '/action-route',
    'OTHER_ACTION': '/other-action-route'
  }
);

Your apiRoute should be a reference to the location of your route i.e. https://restcountries.eu/rest/v2/ The routes provide an object containing all the sub-routes to append to your apiRoute. Side note: the GET_MANY_ will append '/all' to the end of the request, so make sure the API is written accordingly.

The actions provide an array of action types that will be appended to the redux action, such as 'GET_COUNTRY'.

The routes item is simply an object with the action name as the key with the route for that action as the value.

The crud reducer requires a state object of the following shape:

export interface CrudState {
  list: Array<T>;
  selectedItem: T;
  isLoading: boolean;
  isCreating: boolean;
  errorDetails: string;
}

The Crud State can be imported from the project as well and has the above shape so you can create your own state as follows:

interface MyState extends CrudState {
    /* The CrudState attributes will be included here */
    myAttributes: string;
}

Actions

The actions that the reducer handles are the following:

  • 'CREATE_' : Executes a post with the action.payload
  • 'CREATED_' : Creates a new state object with created object appended to list
  • 'DELETE_' : Executes a delete with the action.id
  • 'DELETED_' : Creates a new state object without action.id in the list
  • 'GET_' : Executes a get with the action.id
  • 'GOT_' : Creates a new state object with selectedItem set to returned item
  • 'GET_MANY_' : Executes a get with action.name
  • 'GOT_MANY_' : Creates a new state object with list set to returned item
  • 'UPDATE_' : Executes a put with the action.payload
  • 'UPDATED_' : Creates a new state object with list updated with new item
  • 'SET_CREATING_' : Tracks when the user is creating a new object
  • 'SET_UPDATING_' : Tracks when the user is updating an existing object
  • '_ACTION_FAILED' : Contains the action.name and errorDetails from failed HTTP request

Support Our Packages

paypal