React確認模態和redux中間件

我是React和Redux的新手。我想從列表中刪除項目，所以我派遣一個動作deleteSelectedItems然後我使用REDX中間件來捕捉它並顯示確認。這看起來象下面這樣：React確認模態和redux中間件

操作：

export const deleteSelectedItems =() => { 
    return { 
    type: ActionTypes.ITEM.DELETE_SELECTED, 
    payload: { 
     confirm: { 
     message: 'Are you sure you want to delete these selected items?' 
     } 
    } 
    } 
};

中間件：

const confirmMiddleware = store => next => action => { 
    if (action.payload.confirm) { 
    if (confirm(action.payload.confirm.message)) { 
     next(action); 
    } 
    } else { 
    next(action); 
    } 
};

一切運作良好。現在，我不想用confirm()來顯示確認對話框，我想用我自己的ConfirmDialog組件代替。我發現@Dan Abramov solution，那太棒了。但我很困惑如何將這些融合在一起。我想用confirmMiddleware發送一個顯示模式的動作，但我不知道如何處理，當用戶單擊確定或取消模態。我怎樣才能做到這一點？

來源

2016-08-22 An Nguyen

我設法獨立地重新發明了丹在這個問題中描述的模態管理技術，然後將其推得更遠。我在https://www.reddit.com/r/reactjs/comments/4wjmme/implement_a_confirm_modal_using_react_redux/d68ajcw?context=3做了我的方法的寫作。引用自己：

我有一個核心組成部分，負責顯示當前打開的所有對話框，在適當的佈局順序（即我可以有「DialogB」上「DialogA」等的頂部）。想要觸發顯示對話框的組件運行一個動作創建器，該動作創建器分派「SHOW_DIALOG」動作，有效載荷中的對話框組件的名稱以及附加到動作的任意附加數據。該數據被添加到商店中，並且對話管理組件將在呈現時將該額外數據作爲道具傳遞給對話組件。

我創建了一些通用的「選擇器」對話框，如ColorPicker和IconPicker。這些對話對我的其他應用程序一無所知。他們可以在他們的道具中獲取一些可選的數據位（例如最初選擇的顏色值），並且還在尋找一個名爲「onColorSelected」的特殊道具。請求該對話框的組件可以包含整個另一個操作作爲有效負載的一部分，並且當對話框點擊「確定」按鈕時，該新操作將與對話框的「返回值」一起分派。

所以，一般來說，我的建議是包含傳遞給對話框的普通操作對象，並且對話框可以在操作關閉時調度該操作的副本。

來源

2016-08-22 16:35:28 markerikson

我也這麼認爲，但我不確定這是否是最好的方法。讓我嘗試。謝謝 –

Redux中間件並不是真正適合用戶界面的地方，因爲window.confirm具有神奇的力量，並且可以停止執行的線程，所以它只能在您現有的實現中真正起作用。

相反，我會建議分派一個單獨的動作來打開確認對話框，例如CONFIRM_DELETE_ITEMS它切換一個標誌以指示應該顯示對話框，然後在點擊對話框確認按鈕時調度DELETE_ITEMS動作。

例如

function Root({ dispatch, confirmDeleteItems }) { 
    return (
     <div> 
      {confirmDeleteItems ? (
       <ConfirmDialog onConfirm={() => dispatch(deleteItems())} onDeny={() = dispatch(hideModal())} /> 
      ) : null} 
      <button onClick={() => dispatch(confirmDeleteItems())}>Delete</button> 
     </div> 
    ) 
}

來源

2016-08-22 16:30:47 riscarrott

感謝您的建議！你的方法看起來很簡單，讓我試試。 –

React確認模態和redux中間件

回答

相關問題