über Lastdaten verwirrend basierend auf Router params in reagieren Komponente

Question

Ich mag Daten von api auf Router params in der Komponente Basis laden,

Die Kanalseite verhält sich wie erwartet, wenn ich die Seite zum ersten Mal öffnen, aber wenn ich gehe zu andere Kanal Seite durch Klicken, ChannelPage Komponente nicht componentDidMount aufrufen, aber Reduzierung erhalten FETCH_MESSAGES Aktion, die Sidebar Komponente auch das Problem haben. redux-devtools kann nur LOCATION_CHANGE Aktion erhalten, wenn andere Kanal-Seite geklickt wird. es ist zu komisch!

Was ist das beste Verfahren zum Laden von Daten basierend auf Parametern in der Reaktionskomponente?

Seitenleiste

class Sidebar extends React.Component { 
    componentDidMount() { 
    this.props.fetchChannels(1); 
    } 

    openChannelPage = (e, url) => { 
    e.preventDefault(); 
    console.log('open channel page'); 
    this.props.changeRoute(url); 
    }; 

    render() { 
    let channelsContent = null; 

    if (this.props.channels !== false) { 
     channelsContent = this.props.channels.map((item, index) => (
     <ChannelItem 
      routeParams={this.props.params} item={item} key={`item-${index}`} href={item.url} 
      handleRoute={(e) => this.openChannelPage(e, item.url)} 
     /> 
    ), this); 
    } 

    return (
     <div id="direct_messages"> 
     <h2 className={styles.channels_header}>messages</h2> 
     <ul> 
      {channelsContent} 
     </ul> 
     </div> 
    ); 
    } 
} 

const mapStateToProps = createStructuredSelector({ 
    channels: selectChannels(), 
}); 

const mapDispatchToProps = (dispatch) => ({ 
    changeRoute: (url) => dispatch(push(url)), 
    fetchChannels:() => dispatch(fetchChannels()), 
}); 

export default connect(mapStateToProps, mapDispatchToProps)(Sidebar); 

Channel

class ChannelPage extends React.Component { 
    componentDidMount() { 
    console.log('##Fetch history messages##'); 
    this.props.fetchMessages(this.props.channel); 
    } 

    render() { 
    return (
     {this.props.channel.name} 
    ); 
    } 
} 

const mapStateToProps = createStructuredSelector({ 
    channel: selectChannel(), 
}); 

export default connect(mapStateToProps, { 
    fetchMessages, 
})(ChannelPage); 

appReducer

function appReducer(state = initialState, action) { 
    switch (action.type) { 
    case RECEIVE_CHANNELS: 
     console.log('received channels'); 
     return state; 
    case FETCH_CHANNELS: 
     console.log('fetching channels'); 
     return state; 
    case FETCH_MESSAGES: 
     console.log('fetching history messages---WTF'); 
     return state; 
    default: 
     return state; 
    } 
} 

export default appReducer; 

Minderer empfangen unerwartete Aktion FETCH_MESSAGES

redux-devtools aufnehmbar nur LOCATION_CHANGE Aktion zu anderen Kanalseite

Welches ist das richtige Verhalten gehen?

Answer 1

Es gibt zwei Fragen

Was ist die beste Praxis Daten zum Laden basierend auf params in reagieren Komponente?

Sie können componentDidUpdate() verwenden Anfrage auf Router versenden basierend params Daten von API

Minderer unerwartete FETCH_MESSAGES Aktion erhalten, wenn navigate von messages/1 zu messages/2

Es ist ein erwartetes Verhalten zu bekommen, Reducer wird die vorherige Aktion erhalten, wenn Sie von messages/1 zu messages/2 navigieren, und die componentDidMount bereits lief onc e so wird es niemals

genannt werden