在我的状态对象中导致使用布尔变量重新渲染的问题

Question

所以我在我的状态中有几个布尔变量来控制我的ui中某些元素的可见性，我尝试通过onClick按钮调度一个动作来切换它但是它似乎没有工作......

容器组件

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

表现部分

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

减速器

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;

动作创作者

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

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

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