Having problems causing re-render with boolean var

问题:

So I have a couple boolean variables in my state to control visibility of certain elements in my ui and I try to toggle it by dispatching an action through a button onClick but it doesn't seem to be working...

container component

import { connect } from 'react-redux'
import { toggleUnexcusedAbsences, toggleUnexcusedTardies, toggleExcused } from '../actions'
import AttendanceDetails from '../components/AttendanceDetails'

const mapStateToProps = (state) => {
  console.log('state:', state);
  console.log('state.unexcusedAbsencesShow:', state.unexcusedAbsencesShow);

  return {
    attendance: state.eventsSlipsRolls,
    unexcusedAbsencesToggle: state.unexcusedAbsencesShow,
    unexcusedTardiesToggle: state.unexcusedTardiesShow,
    excusedToggle: state.excusedShow
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onAbsencesToggle: () => {
      dispatch(toggleUnexcusedAbsences())
    },
    onTardiesToggle: () => {
      dispatch(toggleUnexcusedTardies())
    },
    onExcusedToggle: () => {
      dispatch(toggleExcused())
    }
  }
}

const AttendanceBar = connect(
  mapStateToProps,
  mapDispatchToProps
)(AttendanceDetails)

export default AttendanceBar

presentational component

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { Button, Collapse, Well } from 'react-bootstrap'

import { joinValidClasses } from '../constants'

const AttendanceDetails = ({ attendance, unexcusedAbsencesToggle, unexcusedTardiesToggle, excusedToggle, 
  onAbsencesToggle, onTardiesToggle, onExcusedToggle }) => {

  console.log('unexcusedAbsencesToggle', unexcusedAbsencesToggle);

  return (
    <div>
      <Button onClick={onAbsencesToggle}>
        Unexcused Absences
      </Button>
      <Collapse in={unexcusedAbsencesToggle}>
        <div>
          <Well>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
          </Well>
          <Well>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
          </Well>
        </div>                                  
      </Collapse>
    </div>
  )
}

AttendanceDetails.propTypes = {
  attendance: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
  unexcusedAbsencesToggle: PropTypes.bool.isRequired,
  unexcusedTardiesToggle: PropTypes.bool.isRequired,
  excusedToggle: PropTypes.bool.isRequired,
  onAbsencesToggle: PropTypes.func.isRequired,
  onTardiesToggle: PropTypes.func.isRequired,
  onExcusedToggle: PropTypes.func.isRequired
};

export default AttendanceDetails

reducer

import { TOGGLE_UNEXCUSED_ABSENCES, TOGGLE_UNEXCUSED_TARDIES, TOGGLE_EXCUSED } from '../actions';
import initialState from '../initialState';

function toggleVisibility(state = initialState, action) {
  switch (action.type) {
    case TOGGLE_UNEXCUSED_ABSENCES:
      let toggle = Boolean(!state.unexcusedAbsencesShow)
      return Object.assign({}, state, {
        unexcusedAbsencesShow: toggle
      });
    case TOGGLE_UNEXCUSED_TARDIES:
      return Object.assign({}, state, {
        unexcusedTardiesShow: !state.unexcusedTardiesShow
      });
    case TOGGLE_EXCUSED:
      return Object.assign({}, state, {
        excusedShow: !state.excusedShow
      });
    default:
      return state;
  }
}

export default toggleVisibility;

action creators

export const toggleUnexcusedAbsences = () => {
  return {type: TOGGLE_UNEXCUSED_ABSENCES};
}

export const toggleUnexcusedTardies = () => {
  return {type: TOGGLE_UNEXCUSED_TARDIES};
}

export const toggleExcused = () => {
  return {type: TOGGLE_EXCUSED};
}