react-router鏈接調用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

那麼，有更多的選擇：

如果你有，你必須留下來，如果一個被註銷，你必須重定向到「/」（例如路線和一些：/約 - > /但左右/私營 - > /），所以如果你想重定向到「/」每次你應該使用<button onClick={props.logoutAction}>logout</button>而不是鏈接和擦除店裏處理一些<Redirect />或history.push()基於狀態的變化和location.pathname

後在註銷時，所以我會用<Link to='/?logout=true'>logout</Link>來做，然後處理擦除狀態並重定向回'/'