react-router Link calling Redux Action

I have a menu in React with an option to Log out. I keep the session state in the Redux store. When I click on the Log out option I want to dispatch an action to destroy the session in the Store and the App will render the content hiding any non-public UI.

This is my render() method in the Menu component:

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

Is it a better way to modify the Store state than adding and onClick handler in the Link component for the log out?

What is the best approach to follow uni-directional data flow best practice with React+Redux?

Thanks! :)