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 🙏

© 2025 – Pkg Stats / Ryan Hefner

react-vodka

v0.0.9

Published

React CRUD system

Downloads

36

Readme

Vodka

Vodka is a class to easily help build reducers and sagas for you. Vodka also manages tree like structure for objects of objects

Install

Yarn

yarn add react-vodka

npm

npm install react-vodka --save

Example usage

// mixers.js

import Vodka from 'react-vodka';

const vodka = new Vodka({
    baseUrl: 'https://api.bookstore.local',
    headers: {
        'Content-Type': 'application/json',
    },
});

vodka.shot({
    name: 'books',
    endpoint: 'books/{book}',
    key:'slug',
});

// Create a mapped child module of books 
vodka.shot({
    parents: 'books',
    name: 'pages',
    endpoint: 'books/{book}/pages/{pages}/',
});

// Create a mapped child module of pages 
vodka.shot({
    parents: 'books.pages',
    name: 'words',
    endpoint: 'books/{book}/pages/{page}/words/{word}',
});

//additional example 
vodka.shot({
    name: 'pages',
    endpoint: '/books/{book}/pages/{pages}/',
    parents: 'books', //optional
    key: 'slug', //optional default "id"
    configs: [ //optional [prefixed automatically]
        'CREATE_LINE',
        'CREATE_LINE_ASYNC',
    ], //optional
    reducers: { //optional
        'CREATE_LINE' : (state, action) => {
            return Object.assign({}, state, {
                lines: Object.assign(state.books[action.params.book].lines, action.lines),
            });
        },
    },
    sagas: [
        function* () {
            while(true) {
                const action = yield effects.take('CREATE_LINE');
                console.log(action);
                //do something with your saga
            }
        },
    ],
    except: [ //optional
        'store',//remove store method
    ],
});


// Muiltple shots example 
vodka.shots([
    {
        name: 'books',
        endpoint: 'books/{book}',
        key:'slug',
    },
    {
        name: 'pages',
        parents: 'books',
        endpoint: 'books/{book}/{pages}/',
    },
    {
        name: 'words',
        parents: 'books.pages',
        endpoint: 'books/{book}/pages/{page}/words/{word}',
    },
]);

export default vodka;

Install Vodka into your app

import React from 'react';
import ReactDOM from 'react-dom';
import vodka from './modules/Mixers';
import {combineReducers} from 'redux';
import {routerReducer} from 'react-router-redux';
import {reducer as form} from 'redux-form';
import {createStore} from 'react-vodka';
import {Provider} from 'react-redux';
import {BrowserRouter as Router } from 'react-router-dom';
import {syncHistoryWithStore} from 'react-router-redux';
import {createBrowserHistory} from 'history';
import Routes from './modules/Route';
import {persistStore} from 'redux-persist';
import localForage from 'localforage';

import * as preLoader from './modules/PreLoader/config';
import preloaderReducer from './modules/PreLoader/reducer';

const reducers = combineReducers({
    routing: routerReducer,
    form,
    preloaderReducer,
    ...vodka.getReducers(),
});

const sagas = [
    ...vodka.getSagas(),
];

const browserHistory = createBrowserHistory();
const store = createStore(browserHistory, reducers, sagas, window.data);
const history = syncHistoryWithStore(browserHistory, store);

persistStore(store, {storage: localForage}, () => {
    store.dispatch({
        type: preLoader.SET_LOADER,
        loaded: true,
    });
});

ReactDOM.render(
    <Provider store={store} key="provider">
        <Router history={history}>
            <div>
                <Routes/>
            </div>
        </Router>
    </Provider>
, document.getElementById('app'));

if (process.env.NODE_ENV !== 'production') {
    window.React = React;
}

Vodka also comes with an Auth class to easily build an auth saga and reducer.

import Vodka, {Auth} from 'react-vodka';

const auth = new Auth({
    baseUrl: 'http://localhost:8000/admin',
    register:false,
});

const vodka = new Vodka({
    baseUrl: 'http://localhost:8000/admin',
    auth: auth,
});

export default vodka;

Local package development

git clone 
yarn && yarn build && npm link

TODO

  • [x] Need to find a way to add a trailing slash if outgoing url doesn't already have one
  • [x] Need to figure out how to have a manageable config object
  • [x] Need to replace child's parent's reducer function with an object with child's key as a property
  • [ ] Need to add sagas to manage children easier rather than update parent each time
  • [ ] Figure out how to export a immutable object/array
  • [x] Rename Vodka file to index
  • [x] Build package and install in stylique app for testing properly
  • [ ] Have a go at building a routes component
  • [x] Refactor child to parent method calling by removing parent, name object
  • [ ] Make sure child reducer types do not conflict with parent's
  • [ ] Test that sagas work correctly
  • [ ] Test child setup
  • [ ] Update dependencies
  • [ ] Rewrite README

Not so important right now

  • [x] Add custom reducer methods to vodka function config
  • [x] Add custom saga methods to vodka function config