ResultsReducer.js

//@flow
import { TOGGLE_RESULT_ERROR_DISPLAY, } from '../actions/actionTypes'
const _ = require('lodash')

export const toggleResultErrorDisplay = (results: ScenarioActionResults = {}, action: ToggleResultErrorDisplayType): ScenarioActionResults => {
  const result = _.get(results, [action.scenarioId, action.actionId])
  if(!result){
    return results
  }
  const scenarioResults = _.get(results, action.scenarioId)
  // the reference that the container has is to the object that starts on line 17.
  // Note: The code below works, because I'm creating a new object, and thus a new reference.
  return {
    ...results,
    [action.scenarioId]: {
      ...scenarioResults,
      [action.actionId]: {
        ...result,
        error: {
          value: result.error.value,
          isHidden: !result.error.isHidden,
        }
      }
    }
  }
  // I was doing the following (slightly different code shown below for brevity)
  const result = _.get(results, [action.scenarioId, action.actionId])
  return _.set(results, [action.scenarioId, action.actionId], {
    ...result,
    error: {
      value: result.error.value,
      isHidden: !result.error.isHidden,
    }
  })
}

const resultsReducer = (state: ResultsState = {value: {}}, action: Object): ResultsState => {
  switch(action.type) {
    /**
    * code omitted for brevity
    */
    case TOGGLE_RESULT_ERROR_DISPLAY:
      // My assumption was that since I was returning a new 'base' state object, that my container would've seen a new reference, and thus 
      // updated, but since JS doesn't create new nested objects with different references, changing the root was futile.
      // Remember, on ResultsContainer.js (on line 18) I was requesting an object that was nested in the state, not the state itself.  
      //   That's why my components didn't receive any new props.  
      return {
        ...state,
        value: toggleResultErrorDisplay(_.get(state, 'value'), action)
      }
    default:
      return state
  }
}

export default resultsReducer