React-Router Link Calling Redux Aktion

Question

Ich habe ein Menü in Reagieren mit einer Option zu Log out. Ich behalte den Sitzungsstatus im Redux-Speicher. Wenn ich auf die Option Log out klicke, möchte ich eine Aktion zum Löschen der Sitzung im Store senden, und die App rendert den Inhalt, der eine nicht öffentliche Benutzeroberfläche versteckt.

Das ist mein render() Methode in der Menu-Komponente:

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

Ist es eine bessere Art und Weise Store Zustand als das Hinzufügen und onClick Handler in der Link-Komponente für das Protokoll aus zu ändern?

Welcher Ansatz eignet sich am besten, um Best Practices für den unidirektionalen Datenfluss mit React + Redux zu verfolgen?

Danke! :)

Answer 1

Nun gibt es mehr Optionen:

Wenn Sie Strecken, wo Sie bleiben müssen, wenn man sich abzumelden und einige, die Sie auf ‚/‘ (ex zu umleiten haben:/about ->/über aber/private -> /) So sollten Sie wahrscheinlich <button onClick={props.logoutAction}>logout</button> statt Link verwenden und nach dem Laden einig <Redirect /> oder history.push() auf der Grundlage der Zustandsänderung und location.pathname Griff Löschen

Wenn Sie auf ‚/‘ jedes Mal umleiten mögen beim Abmelden, so würde ich es tun mit <Link to='/?logout=true'>logout</Link> und dann handhaben löschenden Zustand und Weiterleitung zurück zu '/'