繁体   English   中英

Redux:在子组件调度Redux操作时通知父React组件

[英]Redux: Notify parent React component when the child component dispatches a Redux action

我的父组件是一个React类,其中有一个执行setInterval (以及其他方法)的方法。 当满足某些条件时,将清除此间隔。

但是,我希望当其子级中的一个子类调度特定操作时,再次在父React类上调用此方法(从而重新设置setInterval )。

如何通知父母孩子已分派某个(Redux)动作? 我正在使用connect传递状态。 因此,父母和孩子共享相同的调度方法。

不知道这是否是解决您问题的最佳解决方案,但是如何将回调传递给子组件并从父组件分派redux操作呢? 您也可以在那里清除间隔。

实际上,您可以将send操作方法从父级传递到子级,在此子级组件中调用此方法,例如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> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM