电子材料-ui线性进度条来自redux商店的“模式”道具

Question

我正在尝试通过Redux商店管理Material-UI的Linear Progress组件的“模式”道具。商店通过按钮点击另一个子组件手动抛出“确定”和“不确定”之间正确获取更新。

我有应用程序最高级别的栏，特别是：

// @flow
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { ipcRenderer } from 'electron';
import { ToastContainer } from 'react-toastify';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import LinearProgress from 'material-ui/LinearProgress';
import returnFuncFromString from '../utils/returnToastFnFromStr';
import ModalRootContainer from '../components/ModalRoot';
import { Content, Pane, PaneGroup, Window } from '../vendor/photon';
import Sidebar from '../components/Sidebar';
import Footer from '../components/Footer';
import Header from '../components/Header';


ipcRenderer.on('toast', (event, func) => {
  // We can return a function that will execute
  returnFuncFromString(func);
});

// Theme passing by ThemeProvider http://www.material-ui.com/#/customization/themes

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

class App extends Component {
  static defaultProps: Object;

  // state: {
  //   mode: string
  // }

  constructor(props) {
    super(props);
  }

  render() {
    console.log('APP: ', this.props.mode.mode);
    return (
      <div>
        <MuiThemeProvider >
          <Window>
            <Header />
            <LinearProgress mode={this.props.mode.mode} />
            <Content >
              <PaneGroup>
                <Sidebar />
                <Pane className="padded-more main-pane" >
                  {this.props.children}
                </Pane>
              </PaneGroup>
            </Content>
            <Footer />
          </Window>
        </MuiThemeProvider>
        <ModalRootContainer />
        <ToastContainer style={{ zIndex: '10000' }} />
      </div>
    );
  }
}

App.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]),
  mode: PropTypes.object.isRequired
};

App.defaultProps = {
  children: null
};

const mapStateToProps = (state) => ({
  mode: state.isBusy
});

export default withRouter(connect(mapStateToProps)(App));

当我切换状态时，我可以看到存储正确更新，我从上面得到console.log，所以我知道正在调用另一个render（），我可以看到模式之间<div>的更改= “（in）确定”如图所示。

然而，这个酒吧在变化时没有显示动画的迹象。如果我手动设置mode =“indeterminate”并删除与商店的连接，它会按预期动画。

我错过了一些基本的东西吗？