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

redux-fetch-wrapper

v1.0.0

Published

Fetches using standardized, four-part asynchronous actions for redux-thunk. Based on fetch-action-creator.

Downloads

4

Readme

Redux Fetch Wrapper

Fetches using standardized, four-part asynchronous actions for redux-thunk. Based on fetch-action-creator.

Dispatch a single, asynchronous action that fetches a request, and your redux store will receive corresponding actions when your fetch API (1) requests, (2) resolves a response, (3) rejects an error, and/or (4) is aborted.

version minified size minzipped size downloads build

Install

  • npm install redux-fetch-wrapper --save or
  • yarn add redux-fetch-wrapper

Your redux store must be using the redux-thunk middleware.

Basic Example

import {makeFetchActions, fetchActionTypes} from 'redux-fetch-wrapper';

const EMPLOYEES = fetchActionTypes('EMPLOYEES');
const fetchEmployees = () =>
  makeFetchActions(

    // Included in the action types received by your redux store.
    'EMPLOYEES',

    // URL to fetch.
    'https://my.business.com/employees.json'
  );

The above example will send a EMPLOYEES_REQUEST action to the redux store, followed by one of the following: EMPLOYEES_ABORT if the request was aborted, EMPLOYEES_REJECT if an error occurred, or EMPLOYEES_RESOLVE if the data was received successfully. These action names are also accessible from the EMPLOYEES object created by fetchActionTypes, e.g. EMPLOYEES.REQUEST.

See the documentation for a list of action properties.

Advanced Example

import {makeFetchActions} from 'redux-fetch-wrapper';

// We want to include an employee's name in the fetch request.
const [ADD_EMPLOYEE, fetchAddEmployee] = name =>
  makeFetchActions(

    // Included in the action types received by your redux store.
    'ADD_EMPLOYEE',

    // URL to fetch.
    'https://my.business.com/employees.json',

    // Fetch options are configurable.
    {
      body: name,
      headers: {
        'Content-Type': 'text/plain; charset=utf-8'
      },
      method: 'POST'
    }

    // Action mutators can change the default actions sent to the redux reducers.
    {

      // An object mutator will EXTEND the default action sent to the redux reducer.
      // The abort action will now have a name property equal to the one passed to fetchAddEmployee.
      onAbort: { name }

      // The reject action will now have a name property equal to the one passed to fetchAddEmployee
      //    and a timestamp property equal to the time that the error occurred.
      onReject: {
        name,
        timestamp: Date.now()
      },

      // A function mutator will RECEIVE the default action sent and mutate it before passing it to the redux reducer.
      // The request action will now have a name property equal to the one passed to fetchAddEmployee.
      onRequest: requestAction => ({
        ...requestAction,
        name
      }),

      // The resolve action will now have a name property equal to the one passed to fetchAddEmployee
      //    and a timestamp property equal to the time that the error occurred.
      // You may mutate the action however you want.
      onResolve: resolveAction => {
        resolveAction.timestamp = Date.now();
        if (name.endsWith('*')) {
          resolveAction.type = 'RESOLVE_ADD_MANAGER';
        }
        return {
          ...resolveAction,
          name
        };
      }
    },

    // A conditional function will prevent the fetch request if it returns false.
    // The conditional function receives the current redux state as a parameter.
    state => {

      // If this request is already loading (handled in the reducer),
      //    don't make the same request again.
      if (state.employees[name].status === 'loading') {
        return false;
      }

      // People named Bob aren't allowed to work here.
      if (name === 'Bob') {
        return false;
      }

      // Allow the addition of anyone else.
      return true;
    }
  );

Parameters

id: string

An ID used to generate the types for each dispatched action.

Example: An ID of ADD_EMPLOYEE will dispatch the actions REQUEST_ADD_EMPLOYEE, RESOLVE_ADD_EMPLOYEE, REJECT_ADD_EMPLOYEE, and ABORT_ADD_EMPLOYEE.

url: string

The URL to which you are dispatching a fetch request.

See also: fetch parameters on MDN

init: null | RequestInit | (state?: Object) => RequestInit

The fetch options which you are including in your fetch request or a function that returns said options, taking the current state as a parameter.

See also: fetch parameters on MDN

Default: Empty object.

actions: Actions | null

An object of action mutators that will change the default actions that are dispatched to the redux reducers.

The keys of this object may be:

  • onAbort, which is used when your fetch request is aborted
  • onReject, which is used when your fetch request encountered an error
  • onRequest, which is used when your fetch request has been initiated
  • onResolve, which is used whe nyour fetch request has resolved successfully

The values of this object may be an object, which will be merged with the default action.

{
  onAbort: { myKey: 'myValue' }
}
// creates
{
  myKey: 'myValue',
  type: 'ABORT_ID'
}

The values of this object may alternatively be a function, which will receive the default action and return a changed action.

{
  onAbort: abortAction => ({
    type: abortAction.type.split('').reverse().join('')
  })
}
// creates
{
  type: 'DI_TROBA'
}

Action properties

  • onAbort

    • no additional properties
  • onReject

    • error contains a string with the error message. This may be either a JavaScript error or server response.

    • statusCode contains an integer value of the response status code, e.g. 404.

  • onRequest

    • body contains the body of the request. This can be a JavaScript object or string.
  • onResolve

    • body contains the body of the response. This can be a JavaScript object or string.

    • headers contains an instance of Headers with which the server responded to the request.

    • statusCode contains an integer value of the response status code, e.g. 200.

abortController: AbortController | null

abortController should be passed an AbortController instance. This instance will be connected to the fetch request when the request is made, and can be used to abort the request.

conditional?: (state: Object) => boolean

If present, this function is called prior to the fetch request.

If it returns true, the fetch request will continue. If it returns false, the entire asynchronous action will be ignored.

The parameter of this function is a current snapshot of your redux state.