反应路由器 调用 Redux 操作的链接

Question

我在 React 中有一个菜单，其中包含Log out的选项。我将会话状态保存在 Redux 存储中。当我单击Log out选项时，我想调度一个操作来销毁应用商店中的会话，应用将呈现隐藏任何非公共 UI 的内容。

这是我在菜单组件中的render()方法：

render() {
const { customer } = this.props
const options = customer.isLoggedIn ? [
{ key: 'p1', name: 'Private Page 1', ref: '/private-page-1' },
{ key: 'p2', name: 'Private Page 2', ref: '/private-page-2' },
{ key: 'l', name: 'Logout', ref: '/' },
] : [
{ key: 'l', name: 'Login', ref: '/' },
]
return (
<div className="App-menu">
<ul>
{
options.map( ( opt ) => {
return (
<li key={ opt.key }>
<Link to={ opt.ref }>{ opt.name }</Link>
</li>
)
} )
}
</ul>
</div>
)
}

修改存储状态是否比在注销的链接组件中添加和onClick处理程序更好？

使用 React+Redux 遵循单向数据流最佳实践的最佳方法是什么？

谢谢！ :)

Answer 1

嗯，还有更多选择：

如果您有必须停留的路线，如果一个正在注销，并且有些路由必须重定向到"/"(例如：/关于 ->/关于但/private ->/( 所以你可能应该使用<button onClick={props.logoutAction}>logout</button>而不是 Link，并在擦除商店后根据状态更改和位置处理一些<Redirect />或history.push().pathname

如果您想每次注销时都重定向到"/"，那么我会使用<Link to='/?logout=true'>logout</Link>进行操作，然后处理擦除状态并重定向回"/">