当使用Redux更改路由时，如何更改菜单切换状态
我想改变菜单的状态，当路由改变，但不能使它工作。
我面临的问题是：当我点击Navbar中的链接时。路线改变了，但它不会关闭。当路线更改时，如何更改菜单状态？react-router-redux能帮我吗？
行动
export function menuToggle(currentState) {
return {
type: 'MENU_TOGGLE',
payload: {
ToggleMenu: !currentState,
},
};
}
减速器
const initialState = {
showMenu: false,
};
export const MenuToggle = (state = initialState, action) => {
switch (action.type) {
case MENU_TOGGLE:
return {
showMenu: action.payload.ToggleMenu,
};
default:
return state;
}
};
组件
class Header extends Component {
componentWillMount() {
document.addEventListener('click', this.handleClickOutside, false);
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClickOutside, false);
}
handleClickOutside = e => {
if (!ReactDOM.findDOMNode(this).contains(e.target)) {
this.props.showMenu === true && this.props.menuToggle(!false);
}
};
render() {
return (
<Head>
<Brand>BRAND</Brand>
<MenuButton
onClick={this.props.menuToggle.bind(null, this.props.showMenu)}
>
MENU
</MenuButton>
<MobileMenu showMenu={this.props.showMenu} />
</Head>
);
}
}
const mapStateToProps = state => {
return {
showMenu: state.MenuToggle.showMenu,
};
};
const mapDispatchToProps = { menuToggle };
export default connect(
mapStateToProps,
mapDispatchToProps,
)(Header);
子组件
const MobileMenu = ({ showMenu }) => {
return (
showMenu === true && (
<Nav>
<Ul>
<Li>
<A to="/">
<Span>Home</Span>
</A>
</Li>
<Li>
<A to="/shop">
<Span>Shop</Span>
</A>
</Li>
<Li>
<A to="/contact">
<Span>Contact</Span>
</A>
</Li>
</Ul>
</Nav>
)
);
};
export default MobileMenu;
共有1个答案
是的，react-router-redux可以帮助你。你可以在减速器中监听LOCATION_CHANGE并关闭“showmenu”。
-
问题内容： 有人知道如何在不更改url的情况下更改ui路由器状态吗？如下代码所示；在某些情况下，需要将用户重定向到403或401状态。我希望能够执行此重定向而无需更改url。 问候，klmdb 问题答案： 将选项传递给$ state.go 实际使用它：http : //plnkr.co/edit/w2aolrt9wdW3EFcEB3Lw?p=preview
-
问题内容： 保持不变，尽管我在函数中调度了一个动作： 输出为NO_AUTH（的初始值） 减速器： 知道为什么吗？ 问题答案： 您当前正在直接在未映射到的componentDidMount内部调度： 这应该做的工作： 现在，这将获得authState：
-
我知道这是查询已经在这里回答但我不知道为什么我的代码没有工作 我有两个列表，当第一个列表改变时，其他列表会更新，这是我的代码 这是我的后盾： 如果有人能在这方面提供帮助，或者给我一个很好的教程，我会非常感激的，提前谢谢
-
我有一些“ChangeMainItem”操作（在我的例子中，它是由外部系统或可能的组件之一调度的）。此操作（例如）仅更新reducer中状态的一个属性（例如）。 我的组件A和B需要对此状态更改做出反应：显示加载指示器、获取其他数据并显示结果。顺序动作可以通过一些异步动作库来完成，但是我应该把调度异步动作放在哪里呢？显然，我不能在组件A和B的reducer中分派异步操作，我也不想将原始操作更改为异步
-
问题内容： 我有一个使用redux和react-router的通用react应用程序。 我有以下几种路线： 等等 每个路由都需要来自API的数据。目前，我在Navigation组件中的元素调度了一个async action ，该操作使用来自该路线的API中的数据填充商店。 对于MVP，我只是在路线更改时用新的帖子内容覆盖商店中的内容，这样我们就可以获取API上的所有新内容。 我已经意识到在按钮上设
-
问题内容： 我必须根据浏览历史实现一些业务逻辑。 我想做的是这样的： URL更新后，有什么方法可以接收来自react-router的回调吗？ 问题答案： 尝试检测路线变化时，可以使用功能。考虑到您正在使用，请用HOC 包装您的组件以访问道具。 返回一个函数。您将使用它来收听。 您可以像这样配置路线 index.js 然后在 AppContainer.js中 从历史文档： 您可以使用收听当前位置的更