react-vodka

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

• Need to find a way to add a trailing slash if outgoing url doesn't already have one
• Need to figure out how to have a manageable config object
• 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
• Rename Vodka file to index
• Build package and install in stylique app for testing properly
• Have a go at building a routes component
• 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

• Add custom reducer methods to vodka function config
• Add custom saga methods to vodka function config