Seamless Immutable

immutable.js

export default (state = initialState, action) => {
  switch (action.type) {
    case ADD_LOAN:
      return state.merge({
        loans: state.loans.concat([action.val])
      })
    case EDIT_LOAN:
      return state.merge({
        loans: state.loans.map((loan, id) =>
          id === action.id ? loan.merge({
            interest: loan.interest * 2,
            term: loan.term + 1
          }) :
          loan
        )
      })
    case DELETE_LOAN:
      return state.loans.filter((loan, id) =>
        id !== action.id
      )
    default:
      return state
  }
}

native.js

export default (state = initialState, action) => {
  switch (action.type) {
    case ADD_LOAN:
      return {
        ...state,
        loans: [...state.loans, action.val]
      }
    case EDIT_LOAN:
      return {
        ...state,
        loans: state.loans.map((loan, id) =>
          id === action.id ? {
            ...loan,
            interest: loan.interest * 2,
            term: loan.term + 1
          } :
          loan
        )
      }
    case DELETE_LOAN:
      return state.loans.filter((loan, id) =>
        id !== action.id
      )
    default:
      return state
  }
}

reducers.js

import {ADD, REMOVE, REMOVE_ALL} from './action-types'
import si from 'seamless-immutable'

const add = (state, {app, name, component}) => {
  const {[app]: types, ...rest} = state
  return si(rest).merge({[app]: {...types, [name]: component}})
}

const remove = (state, {app, name}) => {
  const {[app]: { [name]: component, ...types }, ...rest} = state
  return si(rest).merge({[app]: types})
}

const removeAll = (state, {app}) => {
  const {[app]: types, ...rest} = state
  return si(rest)
}

const handlers = {
  ADD: add,
  REMOVE: remove,
  REMOVE_ALL: removeAll
}

export default (state=si({}), {type, ...payload}) => {
  return handlers[type] ? handlers[type](state, payload) : state
}

reducers.md

Change property of object

ES6

return {
  ...state,
  [name]: value
}

SI

return state.merge({
  [name]: value
})

Change property of object in array

ES6

return state.map(todo =>
  todo.id === action.id ? {
    ...todo,
    text: action.text
  } :
  todo
)

SI

return state.map(todo =>
  todo.id === action.id ?
    todo.merge({text: action.text}) :
    todo
)