Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

redux-updeep

redux-updeep is a small reducer generator that uses updeep to immutably deep merge partial updates into the reducer's state. It's great for reducing boilerplate in your redux actions and reducers!

Version Build Status License

Installation

redux-updeep is available on npm:

npm install redux-updeep

Getting started

1. Create your reducers

import createReducer from 'redux-updeep';

const initialState = {
  user: {
    name: 'Alex',
    company: 'Algolia'
  }
};

export default createReducer('MY_REDUCER', initialState);

That's it ! No need to specify any actions, redux-updeep will take care of it.

2. Dispatch actions

In the previous example, MY_REDUCER is the namespace of the reducer. The reducer automatically handle any action whose type starts with MY_REDUCER and immutable deep merge the payload of the action into the reducer state.

export function updateName(newName) {
  return {
    type: 'MY_REDUCER/UPDATE_NAME',
    payload: {
      user: {
        name: newName
      }
    }
  };
}
dispatch(updateName('Alexandre'))

//  New State:
{
  user: {
    name: 'Alexandre',
    company: 'Algolia'
  }
}

Advanced usage

Handling Arrays

Deep merging arrays using updeep can lead to surprising behaviour, therefore it's recommended to use updeep.constant when merging arrays as values.

Updeep provides a number of utility functions which are very useful for handling arrays, for instance updeep.reject.

import createReducer from 'redux-updeep';
import u from 'updeep';

const initialState = {
  user: {
    name: 'Alex',
    company: 'Algolia',
    favoriteColors: ['green', 'rebeccapurple']
  }
};

export default createReducer('MY_REDUCER', initialState);

export function removeFavoriteColor(newFavoriteColors) {
  return {
    type: 'MY_REDUCER/UPDATE_FAVORITE_COLORS',
    payload: {
      user: {
        // Will ensure the new array replaces the previous one instead of merging with it
        favoriteColor: u.constant(newFavoriteColors)
      }
    }
  };
}

export function removeFavoriteColor(colorToRemove) {
  return {
    type: 'MY_REDUCER/REMOVE_FAVORITE_COLOR',
    payload: {
      user: {
        favoriteColor: u.reject(item => item === colorToRemove)
      }
    }
  };
}

Complex actions

Sometimes deep merging partial updates is not enough and we need to perform complex transformations of the state. In this case, it is possible to pass a third argument to the createReducer function, which needs to be an object mapping action types to normal reducers.

export default createReducer('MY_REDUCER', initialState, {
  'MY_REDUCER/COMPLEX_ACTION': (state, action) => {
    return complexTransformation(state, action.payload);
  };
})

Specifying a path

It is possible to specify a path at which the payload should be merged inside the object. Those paths are the same as the _.get paths and can be strings or arrays.

import createReducer from 'redux-updeep';
import {reject} from 'updeep';

const initialState = {
  user: {
    name: 'Alex',
    company: 'Algolia',
  }
};

export default createReducer('MY_REDUCER', initialState);

export function updateName(newName) {
  return {
    type: 'MY_REDUCER/UPDATE_FAVORITE_COLORS',
    payload: newName,
    path: ['user', 'name']
  };
}

About

small reducer generator that uses updeep to immutably deep merge partial updates into the reducer's state

Resources

License

Packages

No packages published