反応確認ミドルウェアと還元型ミドルウェア

Question

私はReactとReduxを初めて使いました。私はアクションをdeleteSelectedItemsディスパッチするので、私はそれをキャッチし、確認を表示する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を使用してモーダルを表示するアクションをディスパッチしますが、ユーザーがモーダルで[OK]をクリックするかキャンセルするときの対処方法がわかりません。どうやってやるの？

Answer 1

ダンがその問題で説明しているモーダル管理手法を独自に再開発してから、少し遠くにプッシュしました。私はhttps://www.reddit.com/r/reactjs/comments/4wjmme/implement_a_confirm_modal_using_react_redux/d68ajcw?context=3に自分のアプローチの書き方をしました。

私は、現在開いているすべてのダイアログを正しいレイアウト順で表示する責任がある（つまり、「DialogA」などの上に「DialogB」を置くことができます）。ダイアログの表示をトリガーしたいコンポーネントは、 "SHOW_DIALOG"アクションをペイロード内のダイアログコンポーネントの名前と、アクションに付加された任意の追加データとともに送出するアクションクリエータを実行します。そのデータがストアに追加され、ダイアログ管理コンポーネントは、レンダリング時にその余分なデータをダイアログコンポーネントに渡します。

ColorPickerやIconPickerのような一般的な「ピッカー」ダイアログを作成しました。これらのダイアログは、私のアプリケーションの残りの部分については何も知らない。彼らは、それらの小道具（例えば、最初に選択された色の値）のデータのいくつかの任意のビットを取ることができますまた、 "onColorSelected"のような名前で特別な小道具を探しています。ダイアログを要求したコンポーネントは、ペイロードの一部として別のアクションの全体を含めることができます。ダイアログに「OK」ボタンがクリックされると、ダイアログの「戻り値」とともに新しいアクションがディスパッチされます。

私は、一般的に、ダイアログに渡されるプレーンアクションオブジェクトを含めることをお勧めします。ダイアログは、アクションが閉じられたときにそのアクションのコピーをディスパッチできます。

Answer 2

Reduxミドルウェアは本当にUIの正しい場所ではありません。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> 
    ) 
}