Redux: Benachrichtigen Elternteil Reagieren Komponente, wenn die Kindkomponente eine Redux-Aktion löst

Question

Meine Elternkomponente ist eine React-Klasse, die eine Methode enthält, die eine setInterval (unter anderem) tut. Dieses Intervall wird gelöscht, wenn einige Bedingungen erfüllt sind.

Allerdings möchte ich diese Methode auf der übergeordneten React-Klasse erneut aufgerufen werden, wenn einer der Kinder eine bestimmte Aktion löst (wodurch die setInterval zurückgesetzt wird).

Wie benachrichtigen wir die Eltern, dass das Kind eine bestimmte (Redux) Aktion ausgelöst hatte? Ich verwende connect nach unten um den Zustand zu übergeben. Der Elternteil und die Kinder teilen sich die gleiche Versandart.

Answer 1

nicht sicher, ob das die optimale Lösung für Ihr Problem sein würde, aber wie wäre es vorbei einen Rückruf an das Kind Komponente nach unten und Versendung der Redux Aktion aus dem Elternteil? Sie könnten das Intervall auch dort löschen.

Answer 2

Eigentlich können Sie senden Aktionsmethode von Eltern zu Kind, rufen Sie es in Kind-Komponente wie this.props.someMethodToDispatch() und tun Sie etwas damit in der übergeordneten Komponente, bevor Sie Aktion versenden. Zum Beispiel:

const dispatch = (action) => console.info("Action dispatched", action); 
 

 
class Parent extends React.Component { 
 

 
    constructor(props) { 
 
    super(props); 
 
    this._handleChildClick = this._handleChildClick.bind(this); 
 
    } 
 
    
 
    _handleChildClick(action) { 
 
    // You can do something here 
 
    console.info("Child pass action", action); 
 
    // And after that dispatch action 
 
    dispatch(action); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <h2>Simulate handle action from child</h2> 
 
     <Child handleClick={this._handleChildClick} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class Child extends React.Component { 
 

 
    _generateAction() { 
 
    // This is action creator mock 
 
    return {type: "SOME_ACTION", payload: "someting"}; 
 
    } 
 

 
    render() { 
 
    return (<button onClick={() => this.props.handleClick(this._generateAction())}>Click me</button>); 
 
    } 
 
} 
 

 
ReactDOM.render(<Parent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>