Question

我对使用Redux并不陌生，无法弄清楚为什么没有更新我的Sidebar组件以打开抽屉。我可以看到我的操作被调用了，但是它似乎没有触发组件中的任何更新。我尝试遵循Redux文档，但由于以相同的方式设置了代码，因此看不到缺少的内容。

我不想用代码填充帖子，但是如果您需要更多信息来帮助解决此问题，请告诉我。谢谢您的帮助。

解决方案：：我在状态对象上使用了错误的属性，因此没有更新我的组件。应该是state.Sidebar.open而不是state.open。

const mapStateToProps = (state:any) => ({  
    open: state.Sidebar.open
});

菜单容器：

import { connect } from 'react-redux';
import { toggleSidebar } from '../actions';
import Menu from '../components/Menu/Menu';

const mapStateToProps = (state:any) => ({  
    open: state.open ? state.open : false
});

const mapDispatchToProps = (dispatch:any) => ({
  toggleSidebar: (open:boolean) => dispatch(toggleSidebar(open))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Menu);

菜单组件：

class Menu extends React.Component<IMenuProps> { 
    private handleDrawerOpen = () => {        
        this.props.toggleSidebar(true);
    }

    private handleDrawerClose = () => {
        this.props.toggleSidebar(false);
    }

    public render() {
        return (
            <div>
                <MenuBar 
                    handleDrawerOpen={this.handleDrawerOpen}
                />
                <SideBar
                    open={this.props.open} 
                    handleDrawerClose={this.handleDrawerClose}
                />
            </div>
        );
    }
}

侧边栏：

class Sidebar extends React.Component<ISideBarProps> {
  public render() {
    return (
      <div>
        <Drawer 
          open={this.props.open} 
          onClose={this.props.handleDrawerClose}>

          <div
            tabIndex={0}
            role="button"
          >
            <AdministrationItems />
          </div>
        </Drawer>
      </div>
    );
  }
}

*编辑减速器：

const sidebar = (state = { open: false }, action:any) => {  
  switch (action.type) {
    case TOGGLE_SIDEBAR: {       
      return {
        open: action.open
      };
    }

    default: {
      return state;
    }
  }
};

操作：

export const toggleSidebar = (open:boolean) => ({
    open,
    type: TOGGLE_SIDEBAR,    
});

Answer 1

我认为错误在于减速器。尝试将减速器替换为：

const sidebar = (state = { open: false }, action:any) => {  
  switch (action.type) {
    case TOGGLE_SIDEBAR: {       
      return {
        ...state,
        open: action.open
      };
    }

    default: {
      return state;
    }
  }
};

您应始终针对每种情况散布状态。让我知道它是否有效

Answer 2

解决方案：我在状态对象上使用了错误的属性，因此未更新我的组件。应该是state.Sidebar.open而不是state.open。

...
God_ID: parseInt($(this).find('td:eq(1)').html(), 10),
Op_Qty: parseFloat($(this).find('td:eq(2)').html()),
...

React / Redux组件未更新

2 个答案: