コンポーネントの状態を親コンポーネントから変更するアクションをディスパッチする方法はありますか？

Question

私はモーダルダイアログを実装しようとしていますが、アプリケーション内のアイテムを削除するかどうかを確認するかどうかを尋ねます。

const Options = item => (
    <OptionsMenu> 
     <MenuItem onClick={_ => { 
      console.log(`Deleting item ${JSON.stringify(item)}`) 
     }}> 
      <IconButton aria-label="Delete" color="accent"> 
       <DeleteIcon /> 
      </IconButton> 
      <Typography> 
       Eliminar 
      </Typography> 
     </MenuItem> 
     <DeleteDialog 
      item={item} 
     /> 
    </OptionsMenu> 
) 

そして、私のダイアログコンポーネントは次のとおりです：私は、このコンポーネントをした

const DeleteDialog = props => (
    <div> 
     <Button onClick={() => { 
     this.props.openDeleteDialog(this.props.item) 
     }}>Delete</Button> 
     <Dialog open={this.props.open} onRequestClose={this.props.cancelDeleteData}> 
     <DialogTitle>{"DELETE"}</DialogTitle> 
     <DialogContent> 
      <DialogContentText> 
      Are you sure you want to delete the item: {this.props.item.name} 
      </DialogContentText> 
     </DialogContent> 
     <DialogActions> 
      <Button onClick={this.props.cancelDeleteData} color="primary"> 
      Cancel 
      </Button> 
      <Button onClick={this.props.deleteData(this.props.item)} color="primary"> 
      Delete 
      </Button> 
     </DialogActions> 
     </Dialog> 
    </div> 
); 

const mapStateToProps = state => ({ 
open: state.item.delete.open, 
}) 

const mapDispatchToProps = dispatch => ({ 
...deleteDispatchesForScope(scopes.ITEM, dispatch) 
}) 

私がしたいことでオプションのコンポーネントから、真のオープン状態を設定openDeleteDialogアクションを、派遣することです私は他のコンポーネントでモーダルDialogを再利用できるようにします。 私はreact-reduxとmaterial-ui v1を使っています。

Answer 1

より多くの再利用可能なコンポーネントを持っているために、私はOptionsMenuからDeleteDialogを切り離すだろう、とそれぞれの子のために必要な小道具を伝承するParentComponentに頼る：

<ParentComponent> 
    <OptionsMenu> 
    <MenuItem onClick={this.props.openDeleteDialog}>Eliminar</MenuItem> 
    </OptionsMenu> 
    <DeleteDialog 
    open={this.props.isDeleteDialogOpen} 
    item={this.props.item} 
    onDelete={this.props.deleteData} 
    /> 
</ParentComponent>