title: How to update two values in two different reducers at the same time in Redux / Atomic operations
body: <p><strong>Project description:</strong> I've a calendar like Google Calendar, where you have zoomIn and zoomOut buttons, and also a datepicker where you can click any date to move your calendar to that date.</p>
  
  <p><strong>Design of store:</strong> I've a filters reducer where I keep the range of the current calendar (for example {start: '01/01/2016', end: '01/01/2017'}), and also a UI reducer where I keep the current zoom level (one of year/month/week)</p>
  
  <p><strong>Scenario:</strong> When someone is on zoomLevel='year' and clicks on a date on the datepicker, I need to go to zoomLevel='week' and also modify the range.</p>
  
  <p><strong>Problem:</strong> How to update the store with both zoomLevel and range, at the same time? If I don't, my calendar breaks due to inconsistency because when I update the first value the user interface renders everything.</p>
  
  <p>UI reducer as an example of generic  reducer:</p>
  
  <pre><code>import * as actions from './action-types'
  import { omit } from 'lodash'
  import initialState from './initial-state'
  export * from './actions'
  export * from './selectors'
  
  // TODO: Eval. Tendria mas sentido hacer el switch por dominio?
  export default function ui(state = initialState, {type, meta: {domain = 'general'} = {}, payload: {key, value} = {}}) {
    switch (type) {
    case actions.SET:
      return {
        ...state,
        [domain]: {
          ...state[domain] || {},
          [key]: value
        }
      }
    case actions.TOGGLE:
      return {
        ...state,
        [domain]: {
          ...state[domain] || {},
          [key]: !!!(state[domain] || {})[key]
        }
      }
    case actions.TOGGLE_IN_ARRAY:
      // No sirve para objetos
      const index = state[domain] &amp;&amp; state[domain][key] ? state[domain][key].indexOf(value) : -1
      return index === -1 ?
        {
          ...state,
          [domain]: {
            ...state[domain] || {},
            [key]: [
              value,
              ...state[domain][key]
            ]
          }
        } : {
          ...state,
          [domain]: {
            ...state[domain],
            [key]: [
              ...state[domain][key].slice(0, index),
              ...state[domain][key].slice(index + 1)
            ]
          }
        }
    case actions.DELETE:
      return {
        ...state,
        [domain]: omit(state[domain], key)
      }
    case actions.CLEAR_DOMAIN:
      return {
        ...state,
        [domain]: initialState[domain]
      }
    case actions.RESET_UI:
      return {
        ...initialState
      }
    default:
      return state
    }
  }
  </code></pre>