У меня есть меню в React с возможностью Log out. Я храню состояние сеанса в магазине Redux. Когда я нажимаю на опцию Log out, я хочу отправить действие для уничтожения сеанса в Магазине, и приложение отобразит содержимое, скрывающее любой непубличный пользовательский интерфейс.
Это мой метод 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, чем добавление обработчика onClick в компонент Link для выхода из системы?
Как лучше всего следовать рекомендациям по однонаправленному потоку данных с помощью React+Redux?
Спасибо! :)
