Under development

redux-nakshatra is a small redux addon library that generates redux boilerplate based on configuration.

Sagas (redux-saga , Types, Actions, Reducers (STAR aka nakshatra) are the main building blocks of this library

Installation

To install the stable version:

npm install --save redux-nakshatra

or

yarn add redux-nakshatra

Peer dependencies

Install the following packages

• redux-saga
• axios

Quick start

• Sagas, Types, Actions, Reducers (STAR aka nakshatra) are the main building blocks of this library. All these are generated based on a config that you describe using the createStar function

import { createStar } from 'redux-nakshatra';

export const { types, actions, rootReducer, rootSaga } = createStar({
  name: 'blogItem',
  http: {
    generateDefault: true,
    url: 'http://localhost:5000/blogitems'
  }
});

• generateDefault: true will generate 6 different HTTP redux actions

  • getBlogItem(obj)
  • getBlogItems(obj)
  • postBlogItem(obj)
  • patchBlogItem(obj)
  • putBlogItem(obj)
  • patchBlogItem(obj)

• You can then use in your redux store configuration as below.

import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { fork } from 'redux-saga/effects';
import * as BlogItems from '../stars/blogItems';

const composeEnhancers =
  typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      })
    : compose;

const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware];

const appReducer = combineReducers({
  blogItems: BlogItems.rootReducer
});

function* rootSaga() {
  yield fork(BlogItems.rootSaga);
}

const enhancer = composeEnhancers(applyMiddleware(...middlewares));

export default function configureStore() {
  const store = createStore(appReducer, {}, enhancer);
  sagaMiddleware.run(rootSaga);
  return store;
}

• And a component that wants to render these can be something like

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import * as BlogItems from '../stars/blogItems';
import { bindActionCreators } from 'redux';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  itemContainer: {
    flexDirection: 'row'
  }
});

class BlogItemsScreen extends Component {
  componentWillMount() {
    this.props.actions.getBlogItems();
  }

  renderItem(item, index, array) {
    return (
      <View style={styles.itemContainer} key={index}>
        <Text style={{ flex: 1 }}>{item.title}</Text>
        <Text style={{ flex: 1 }}>{item.author}</Text>
      </View>
    );
  }
  render() {
    const { loading, error, data } = this.props;
    return (
      <View style={[styles.container, this.props.style]}>
        {this.renderItem({ title: 'Title', author: 'Author' }, -1)}
        {data && data.map(this.renderItem)}
      </View>
    );
  }
}

const mapStateToProps = state => {
  return {
    ...state.blogItems.getBlogItems
  };
};

const mapDispatchToProps = dispatch => {
  return { actions: bindActionCreators(BlogItems.actions, dispatch) };
};

export default connect(mapStateToProps, mapDispatchToProps)(BlogItemsScreen);

Documentation

• http
• graphql
• custom
• API Reference

Examples

• Simple Blog Http
• Simple Blog Graphql
• Simple Music Player

License

MIT

Influences

redux-rest-resource