npm

Reducer and store wrapper that uses paths to update nested values. The path syntax is the same as _.set and _.get form lodash

Instalation

npm instal save universal-reducer

Setup

This is a simplified store configuration script:

Using the default action types, @@SET, @@GET, @@DELETE:

import { createStore } from 'redux'
import { createReducer, createActions } from 'universal-reducer'

const store = createStore(createReducer())

export const actions = createActions({ store })
export default store

For custom action types:

import { createStore } from 'redux'
import { createReducer, createActions } from 'universal-reducer'

const actionTypes = {
  set: 'SET',
  delete: 'DELETE',
  update: 'UPDATE'
}
const store = createStore(createReducer(actionTypes))

export const actions = createActions({ store, actionTypes })
export default store

Usage

import store, { actions } from 'store'

console.log(store.getState()) // {}

Set

Is used to set nested value:

actions.set('parent.child1.child2', '123')

console.log(store.getState())

{
  parent: {
    child1: {
      child2: '123'
    }
  }
}

Update

Is used to update a nested value using an object or a function

actions.update('parent.child1', { child3: '234' })

console.log(store.getState())

{
  parent: {
    child1: {
      child2: '123',
      child3: '234
    }
  }
}

Delete

Is used to delete a nested value and it's coresponding key:

actions.delete('parent.child1.child2')

console.log(store.getState())

{
  parent: {
    child1: {
      child3: '234
    }
  }
}

Get

Is used to retrieve a value from the store:

const child = actions.get('parent.child1.child3')
console.log(child)  // 234

const child = actions.get('parent.child4', 'defaultValue')
console.log(child)  // defaultValue