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>
    )
}

修改Store状态比在Link组件中添加和onClick处理程序以进行注销更好吗？

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

谢谢！ :)

Answer 1

嗯，还有更多选择：

如果你有一条路线，你必须留下来，如果一个人退出，一些你必须重定向到'/'（例如：/ about - ＆gt; / about但/ private - ＆gt; /）所以你可能应该使用<button onClick={props.logoutAction}>logout</button>代替Link，并根据状态更改和location.pathname

删除商店句柄后的一些<Redirect />或history.push()

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

react-router链接调用Redux Action

1 个答案: