Js Immutable

💎Modern IMMUTABILITY for JavaScript. Clean and Elegant🎗
Alternatives To Js Immutable
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Redux Orm2,96682322 months ago70August 11, 2021115mitJavaScript
NOT MAINTAINED – A small, simple and immutable ORM to manage relational data in your Redux store.
Reworm1,467624 months ago13November 14, 201817mitTypeScript
🍫 the simplest way to manage state
Reatom811166 days ago68June 13, 202231mitTypeScript
Reatom - the ultimate state manager
Re Ducks770
5 years ago1JavaScript
An attempt to extend the original proposal for redux modular architecture: https://github.com/erikras/ducks-modular-redux
Autodux589163 days ago16July 28, 201932mitJavaScript
Automate the Redux boilerplate.
Redux Bees584
3 years ago39JavaScript
A nice, short and declarative way to interact with JSON APIs
Redux Analytics4927476 years ago4August 30, 20163JavaScript
Analytics middleware for Redux
Recycle375433 years ago71April 28, 20172JavaScript
Convert functional/reactive object description using RxJS into React component
Redux Tiles241
15 years ago26December 20, 20174mitTypeScript
Composable way to create less verbose Redux code
Redux Saga Thunk2054293 years ago11October 18, 20184mitJavaScript
Dispatching an action handled by redux-saga returns promise
Alternatives To Js Immutable
Select To Compare

Alternative Project Comparisons

Motivation 🐬🐬

Consider the scenario where you have to set a new value to "temporary" field without mutating original state.

const state = {
  detail: {
    age: 30,
    friends: ['Roshan'],
    personal: {
      address: {
        permanent: 'Kathmandu',
        temporary: 'Pokhara'
      spouse: 'Nancy'

Javascript way of setting a new value without modifying original state would be something like this:

// For my brain, this is too much to wrap around just to change a single field.
// There must be some better way. 
const newState = {
  detail: {
    personal: {
      address: {
        temporary: 'New Random Location' // here is the actual change

Look at all the repetition! This is not only annoying, but also provides a large surface area for bugs.

Problems with the above code:

📌 Need to keep track of whole state tree just to perform such small modification.

📌 Need to make sure that state tree is not mutated while returning new state.

📌 Need to make sure structure of state tree is not changed while returning new state. Specially it becomes nightmare in real world application where you don't know which action modified the entire redux state.

📌 If structure of original state tree is modified, then every action reducer must be re-written. i.e Your reducer has an dependency on structure of redux state.

JS Immutable in Action

// Add as a dependency
npm install js-immutable --save
import reduce from 'js-immutable';
// create a address reducer by passing a selector

const addressReducer = reduce({
  detail: {
    personal: {
      address: {
        temporary: '#',
// No mutation fear
// State Structure is maintained
// No dependency to the state structure while returning new state

const newState = addressReducer(state)
  .set('New Random Location')

A more complex scenario where we need to append new friend to the friends list and set new value to permanent address.

const complexReducer = reduce({
  detail: {
    friends: '#friends', // selector
    personal: {
      address: {
        permanent: '#permanent' // selector 

// Clean and elegant 
const newState = complexReducer(state)
  .of('#friends') // using friends selector and appending
  .of('#permanent') // using permanent selector and setting
  .set('New Value')

// or you can simply pipe it through predicate

const newState = complexReducer(state)
	.pipe(friends => friends.concat('John'))
	.pipe(value => value.toUpperCase())


'#' is the default selector. You don't need to use "of("some selector")' when you use '#' as a selector.


📌 Structural Sharing out of Box. Performant! 📌 Your code is independent of the state tree and it's structure.

📌 You don't have to worry about mutation. Js-Immutable handles it for you.

📌 You only have to make changes to selector if structure of redux state tree is modified. Your reducer will never be touched in the case of state tree modification.

📌 It looks functional, clean, simple and easy to follow. It just makes life of your co-worker easier.

More on JS-Immutable


Selector are plain object that helps to select the fields on the state tree. Default selector value is '#'. The selector value must start with '#'. If your selector has multiple fields to select, Make sure they start with '#' and are unique.

// Example of Selector

const selector = {
  person: {
    friends: '#' // default
// Example of using the above selector

const friendsReducer = reduce(selector);

const newState = friendsReducer(state)
  .append('My new friend') // no need of "of('#')" since it is the default one.
// Example of multiple selector

const nextSelector = {
  name: '#name', // named selector (unique)
  detail: {
    address: '#address' // named selector (unique)

// Example of using the above selector

const multipleReducer = reduce(nextSelector);

const newState = multipleReducer(state)
	.set('New Name')
	.merge({temporary: 'Pokhara'})

Available Methods

💧 set(value: any)

Sets the new value to the target field.

💧 append(value: any)

Appends new value on the target array.

💧 merge({key: value})

Merge object on the target object.

💧 extend([]: any)

Concatenate array on the target array

💧 delete(key: any)

Delete a key on the target object or target array.

💧 pipe(predicate: function)

Applies a function/predicate to the target value.

Utility Method

💧 Of(selectorName: any)

Helps to select the specific target so that it apply transformation to that target in the object.

// if we have a multiple targets in a single selector
const selector = {
  task: {
    done: '#done',
    taskDetail: '#taskDetail'
const taskReducer = reduce(selector)

const newState = taskReducer
	.set('some new Detail')


If you think I have missed methods that is crucially important, then please send a Pull Request.


Copyright © 2015-2016 Robus, LLC. This source code is licensed under the MIT license found in the [LICENSE.txt] The documentation to the project is licensed under the CC BY-SA 4.0 license.

Made with ♥ by Robus Gauli ([@robusgauli]

Popular Redux Projects
Popular Selector Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
State Management