0

Reactjs と Redux を使用してアプリケーションに取り組んでいます。リストからアイテムを削除する必要があるという要件があります。ここでは、削除機能は問題なく機能しますが、削除を元に戻すオプションをユーザーに提供する必要があります。私の現在の方法は

return dispatch => {
        dispatch(deletePosts(postID));

        return fetch(API.url(postID), {
            method: API.type,
            credentials: 'same-origin'
        }).then(function(response) {
           if(!response.ok) {
            //revert back
           }
        });
    }

ここでは、最初に状態から投稿を削除してから、フェッチ リクエストを呼び出してサーバーから削除します。しかし、そのような機能を元に戻すと、サーバーから削除することはできません。おそらく3秒間取り消しオプションを表示してアクションを実行するのが妥当だと思います。これを達成する方法と、これを実装している他の Web アプリケーションがあるかどうかを教えてください。ありがとう

4

2 に答える 2

2

2 つのオプションがあります。まず、クライアント側でこのロジックを実装するには:

  1. ユーザーが「削除」ボタンをクリックすると、状態の投稿をマークする必要toBeDeletedがありますが、実際の削除要求をサーバーに送信しないでください。

  2. deletePostForRealを使用してアクションの呼び出しをsetTimeout3 秒間遅らせます。

  3. としてマークされている場合、リストコンポーネントは投稿の代わりに「キャンセル」ボタンを表示する必要がありますtoBeDeleted。

  4. ユーザー ユーザーが「キャンセル」をクリックしtoBeDeletedた場合 – 投稿からフィールドを削除します。

  5. 遅延deletePostForRealアクションで、投稿にtoBeDeletedフィールドがあるかどうかを確認します。はいの場合は、実際のリクエストをサーバーに送信し、ストアから投稿を削除します。いいえ - 何もしないでください。

2番目のオプションは、サーバー側で行うことです。その場合、サーバーは同様のロジック自体を実装し、クライアント側に異なるエンドポイントを提供する必要があります。たとえば、post/ID/deleteとpost/ID/undo_delete.

于 2016-03-02T14:32:03.610 に答える
2

リストの初期状態への参照を保持し、項目を削除してコピーを作成し、必要に応じて初期状態に戻します。

const postsBefore = getPosts();

deletePosts(postID);

return fetch(API.url(postID), {
  method: API.type,
  credentials: 'same-origin'
}).then(function(response) {
  if(!response.ok) {
    revertPosts(postsBefore);
  }
});

レデューサーがミューテーションを実行しないことが重要です。そうしないと、削除関数によって元のデータ構造が変更され、postsBefore参照も変更されます。に戻そうとするpostsBeforeと、まったく同じデータに戻されます。

于 2016-02-29T07:36:06.120 に答える