Redux：親に通知する子コンポーネントがReduxアクションをディスパッチしたときにコンポーネントを応答します。

Question

親コンポーネントは、setInterval（特に）を実行するメソッドを持つReactクラスです。この間隔は、いくつかの条件が満たされるとクリアされます。

しかし、親のReactクラスのこのメソッドは、その子の1人が特定のアクションをディスパッチしたときに再び呼び出されます（これによって、setIntervalが再設定されます）。

子供が特定の（Redux）アクションをディスパッチしたことを親にどのように通知しますか？私はconnectを使って状態を下にしています。したがって、親と子は同じディスパッチメソッドを共有します。

Answer 1

あなたの問題の最適な解決策であるかどうかは分かりませんが、子コンポーネントにコールバックを渡して、親からreduxアクションをディスパッチする方法についてはどうですか？そこの間隔もクリアすることができます。

Answer 2

実際には、親から子に送信アクションメソッドを渡し、this.props.someMethodToDispatch()のような子コンポーネントで呼び出すことができます。アクションをディスパッチする前に、親コンポーネントでそれを実行します。たとえば ：

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>