nano-redux

NanoRedux is a lightweight helper for Redux. It can be used for small stores with simple interractions. You have just to create a class extending NanoRedux and initialize your props in the init method. Each prop initialized is a value in the state. You have many types of props : BasicProp, NumericProp, BooleanProp, ArrayProp. This types provide a set of actions/reducers for each props.

NanoRedux is not for deep and complex state manipulation. The best way is to separate your stores in different files and combine them with combineReducers. With this method you can mix NanoRedux with classic stores

How to install

With npm

npm install nano-redux

With yarn

yarn add nano-redux

How to use

Create a class extending NanoRedux and define your props in the init method

import NanoRedux from 'nano-redux'
import {BasicProp,NumericProp,BooleanProp,ArrayProp} from 'nano-redux'

class UserRedux extends NanoRedux {

    init()
    {
        this.userName  = new BasicProp('no-username')
        this.like       = new NumericProp(10)
        this.logged   = new BooleanProp(false)
        this.friends    = new ArrayProp(["friend 1","friend 2","friend 3"])

        this.doubleLike = this.createCustomAction('doubleLike',state => state.merge({like:state.like*2}))
        this.lastFriend = this.createCustomSelector(state => state.friends[state.friends.length-1])
    }
}

export default new UserRedux()

If you are using combineReducers, you need to name your NanoRedux in the constructor

export default new UserRedux('user')

 let reducer = combineReducers({
        user: userRedux.getReducers(),
        app:appreducers
 })

Add your store to the provider

import React, { Component } from 'react';
import {Provider} from 'react-redux'
import { createStore } from 'redux'
import userRedux from './redux/UserRedux'
import Home from './containers/Home'

const store = createStore(userRedux.getReducers())

class App extends Component {
  render() {
    return (
      <Provider store={store}>
      <div className="App">
       <div>
        <Home />
       </div>
      
      </div>
      </Provider>
    );
  }
}

export default App

In your component, map actions and state like this :

import userRedux from './../redux/UserRedux'
import {connect} from 'react-redux'



const mapStateToProps = (state) => ({
    userName:userRedux.userName.getValue(state),
    like:userRedux.like.getValue(state),
    logged:userRedux.logged.getValue(state),
})
  
const mapActions = (dispatch) => ({
    setUserName:(userName)=> dispatch(userRedux.userName.setValue(userName)),
    resetUserName:()=>dispatch(userRedux.userName.reset()),
    incLike:()=>dispatch(userRedux.like.inc()),
    descLike:()=>dispatch(userRedux.like.desc()),
    enableLogged:()=>dispatch(userRedux.logged.enable()),
    resetLogged:()=>dispatch(userRedux.logged.reset()),
    addToFriends:(name)=>dispatch(userRedux.friends.push(name)),
    removeLastFriend:()=>dispatch(userRedux.friends.removeLast()),
})

export default connect(mapStateToProps, mapActions)(Home)

API

BasicProp

myBasicProp = new BasicProp(initialValue=null)

Action	Description
setValue(newValue)	replace the state value
reset()	set initial value as new value

Selector	Description
getValue(state)	return the current value

NumericProp

myNumericProp = new NumericProp(initialValue=0)

Action	Description
setValue(newValue)	replace the state value
reset()	set initial value as new value
inc()	add 1 to the current value
desc()	remove 1 to the current value
add(value)	add value to the current value

Selector	Description
getValue(state)	return the current value

BooleanProp

myBooleanProp = new BooleanProp(initialValue=false)

Action	Description
setValue(newValue)	replace the state value
reset()	set initial value as new value
enable()	set the value to true
disable()	set the value to false
toggle()	toggle true/false the current value

Selector	Description
getValue(state)	return the current value

ArrayProp

myArrayProp = new ArrayProp(initialValue=[])

Action	Description
setValue(newValue)	replace the state value
reset()	set initial value as new value
push(value)	push value in the array
removeAt(index)	remove value at index
removeFirst()	remove the first value
removeLast()	remove the last value

Selector	Description
getValue(state)	return the current value