javascript - react-router 链接调用 Redux Action

Question

我在 React 中有一个菜单，其中包含用于注销 的选项。我将 session 状态保存在 Redux 存储中。当我点击 Log out 选项时，我想发送一个操作来销毁 Store 中的 session ，应用程序将呈现隐藏任何非公共(public) UI 的内容。

这是我在 Menu 组件中的 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>
    )
}

修改 Store 状态是否比在 Link 组件中添加和 onClick 处理程序用于注销更好？

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

谢谢! :)

Answer 1

好吧，还有更多选择:

如果你有路线，如果有人注销，你必须留下来，有些路线你必须重定向到“/”(例如:/about ->/about 但/private ->/)所以你应该使用 <button onClick={props.logoutAction}>logout</button>而不是 Link 并在删除存储后根据状态变化和 location.pathname 处理一些 <Redirect /> 或 history.push()

如果你想在每次注销时重定向到“/”，那么我会使用 <Link to='/?logout=true'>logout</Link> 来完成，然后处理删除状态并重定向回“/”