No Proscribed Meaning

    snapsheet-redux-helpers

    1.0.1 • Public • Published

    snapsheet-redux-helpers

    Helpers to reduce boilerplate with redux.

    npm version npm downloads Build Status

    Installation

    $ npm install snapsheet-redux-helpers --save
    

    or with yarn

    $ yarn add snapsheet-redux-helpers
    

    Api middleware

    Using the api middleware reduces boilerplate for async actions. Instead of writing actions for your apis like this:

    export function login(username, password) {
      return (dispatch, getState) => {
        dispatch({ type: 'LOGIN' });
        return postJSON('/api/v1/login', { username, password }).then(
          (data) => {
            dispatch({ type: 'LOGIN_SUCCESS', result: data });
            return data;
          },
          (error) => {
            // handle error
            dispatch({ type: 'LOGIN_ERROR', error: error })
            return Promise.reject(error);
          }
        );
      }
    }

    You can write them like this with the use of AjaxAction:

    export function login(username, password) {
      return new AjaxAction('LOGIN')
        .call((apiClient) => apiClient.postJSON('/api/v1/login', { username, password }))
        .toReduxAction();
    }

    Setting up api middleware

    import { createApiMiddleware } from 'snapsheet-redux-helpers';

    You can also minimize the bundle by importing only the files you need

    import createApiMiddleware from 'snapsheet-redux-helpers/lib/createApiMiddleware';
    const middleware = [
      createApiMiddleware(ApiClient)
    ];
     
    const store = createStore(rootReducer, composeEnhancers(
      applyMiddleware(...middleware)
    ));

    NOTE: you will need an ApiClient model to use. See SampleApiClient for an example of how it could be setup. It should accept dispatch, getState in the constructor, but the rest is up to you! This allows you to generalize what happens whenever an ajax call is made, such as beginning a loading indicator, displaying flash messages when an error occurs, or automatically adding params to requests. It also gives you the freedom to use other libraries to make your requests. The only limitation is that each action should return a Promise.

    See demo/index.js for more example usage.

    Demo

    $ git clone https://github.com/bodyshopbidsdotcom/redux-helpers.git
    $ cd redux-helpers
    $ npm install
    $ npm run demo
    $ open http://localhost:3000
    

    Contributing

    Please create an issue with any feature suggestions or bug reports. Pull requests are welcome.

    Keywords

    none

    Install

    npm i snapsheet-redux-helpers

    DownloadsWeekly Downloads

    268

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • snapsheet-tech
    • ankita-tank
    • justin-newman-snapsheet
    • dash-snapsheet
    • elorman
    • mattheyd
    • dakota_larson_snapsheet
    • inomire
    • joe.cormier
    • gsaunsen-snapsheet
    • ericbluhm
    • nicholas.stoffel.snapsheet
    • nberrios-ss
    • mananssh
    • anandrikka
    • tpospisil_ss
    • anvakondak
    • kazuhirouchikata
    • revonok
    • mitesh.shah
    • yujjit
    • chrisdavis178
    • gshetty007snapsheet
    • santi-h
    • carlporter
    • lluchez
    • avedire
    • ifraah
    • abhishek85
    • vanessa.wang
    • whatisdot
    • garciadd
    • jorge-e-toro
    • ojaspatwardhan
    • nathan.gonzalez
    • raphaelshejnberg
    • peterwlanglois
    • deenatenzer
    • roseg
    • jonathanversino-ss
    • rstaudt2
    • ben.richards
    • snapsheetbot
    • drc372
    • petermarathas
    • haden.santefort.snapsheet
    • mpsnap
    • priyankkapadia-snapsheet
    • jdmsnap
    • uttercmsnapsheet
    • rayolivero
    • orenmagid
    • pranav-snap
    • jwydra
    • emilystanish