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

@lore/actions

v1.0.0-beta.1

Published

Blueprints to reduce boilerplate for Redux actions

Downloads

13

Readme

Installation

Lore-Actions is available as an npm package.

npm install @lore/actions

After npm install, you'll find all the .js files in the /src folder and their compiled versions in the /lib folder.

Usage

This provides an abstraction tier to reduce the boilerplate associated with making ajax calls in client side applications that use React and Redux. It works by defining a set of blueprints for standard REST calls for CRUD operations, and then leveraging those blueprints using a configuration file. Example configuration file:

module.exports = {
  blueprint: 'create',

  model: Todo,

  optimistic: {
    actionType: ActionTypes.ADD_TODO,
    payloadState: PayloadStates.CREATING
  },

  onSuccess: {
    actionType: ActionTypes.UPDATE_TODO,
    payloadState: PayloadStates.RESOLVED
  },

  onError: {
    actionType: ActionTypes.REMOVE_TODO,
    payloadState: PayloadStates.ERROR_CREATING,
    beforeDispatch: function(response, args){
      console.log({
        message: "Todo could not be created",
        response: response
      });
    }
  }
};

Configuration options are as follows:

blueprint [required]: can be one of create, destroy, fetch, or update

model [required]: A Backbone Model or Collection, or any function/object that abides by the Backbone interface (has fetch() and save() methods that return a promise).

optimistic [optional]: Action to emit before making an AJAX call to the server. Must be specified as a pair of strings called actionType and payloadState. These values will be picked up by the Redux reducers. actionType should be something like ADD_TODO or REMOVE_TODO (value is arbitrary but should be unique). payloadState should be something like FETCHING or ERROR_CREATING.

onSuccess [optional]: Action to emit if the AJAX call to the server is successful (returns a 200 level status code). Arguments are same as optimistic option.

onError [optional]: Action to emit if the AJAX call to the server fails (returns a non-200 level status code). Supports an optional beforeDispatch callback that allows you to handle the error case by notifying the user (such as through the console or through a toast or snack in the UI).