Apa perbedaan antara redux-thunk dan redux-promise?

Question 1

Sejauh yang saya tahu dan mengoreksi saya jika saya salah, redux-thunk adalah middleware yang membantu kami mengirimkan fungsi async dan nilai debug dalam tindakan itu sendiri sementara ketika saya menggunakan redux-promise saya tidak dapat membuat fungsi async tanpa menerapkannya sendiri mekanisme saat Action melontarkan pengecualian untuk hanya mengirimkan objek biasa.

Apa perbedaan utama antara kedua paket ini? Apakah ada manfaat menggunakan kedua paket dalam satu aplikasi reaksi halaman atau tetap menggunakan redux-thunk sudah cukup?

Question 2

redux-thunk memungkinkan pembuat tindakan Anda mengembalikan suatu fungsi:

function myAction(payload){
    return function(dispatch){
        // use dispatch as you please
    }
}

redux-promise memungkinkan mereka untuk mengembalikan janji:

function myAction(payload){
    return new Promise(function(resolve, reject){
        resolve(someData); // redux-promise will dispatch someData
    });
}

Kedua pustaka berguna jika Anda perlu mengirimkan tindakan secara asinkron atau bersyarat. redux-thunkjuga memungkinkan Anda untuk mengirim beberapa kali dalam satu pembuat tindakan. Apakah Anda memilih satu, yang lain atau keduanya sepenuhnya tergantung pada kebutuhan / gaya Anda.

Question 3

Anda mungkin ingin / membutuhkan keduanya bersama-sama di aplikasi Anda. Mulailah dengan redux-promise untuk tugas asinkron rutin yang menghasilkan promise, lalu tingkatkan untuk menambahkan Thunks (atau Sagas, dll.) Saat kompleksitas meningkat :

Jika hidup itu sederhana, dan Anda hanya melakukan pekerjaan asinkron dasar dengan pembuat yang memberikan satu janji, maka redux-promiseakan meningkatkan hidup Anda dan menyederhanakannya, cepat dan mudah. (Singkatnya, alih-alih Anda perlu berpikir tentang 'membuka bungkusan' janji Anda ketika mereka menyelesaikannya, lalu menulis / mengirimkan hasilnya, redux-promise (-middleware) menangani semua hal yang membosankan itu untuk Anda.)
Namun, hidup menjadi lebih kompleks ketika:
- Mungkin pembuat tindakan Anda ingin menghasilkan beberapa janji, yang ingin Anda kirimkan sebagai tindakan terpisah untuk memisahkan pereduksi?
- Atau, Anda memiliki beberapa pra-pemrosesan dan logika kondisional yang kompleks untuk dikelola, sebelum memutuskan bagaimana dan di mana akan mengirimkan hasilnya?

Dalam kasus tersebut, keuntungan dari redux-thunkadalah memungkinkan Anda untuk merangkum kompleksitas di dalam pembuat tindakan Anda .

Tetapi perhatikan bahwa jika Thunk Anda menghasilkan dan mengirimkan promise, Anda akan ingin menggunakan kedua library tersebut secara bersamaan :

Thunk akan menyusun tindakan asli dan mengirimkannya
redux-promisekemudian akan menangani pembukaan bungkusan di peredam janji individu yang dihasilkan oleh Thunk Anda, untuk menghindari boilerplate yang diperlukan. (Anda malah bisa melakukan semuanya di Thunks, dengan promise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError)... tapi mengapa Anda melakukannya?)

Cara sederhana lain untuk meringkas perbedaan dalam kasus penggunaan: awal vs. akhir siklus tindakan Redux :

Thunks adalah untuk permulaan aliran Redux Anda: jika Anda perlu membuat tindakan yang kompleks, atau merangkum beberapa logika pembuatan tindakan yang rumit, menjauhkannya dari komponen Anda, dan pastinya dari pereduksi.
redux-promiseadalah untuk akhir aliran Anda, setelah semuanya telah diringkas menjadi janji sederhana, dan Anda hanya ingin membukanya dan menyimpan nilai terselesaikan / ditolak mereka di toko

CATATAN / REFS:

Saya menemukan redux-promise-middlewareimplementasi yang lebih lengkap dan dapat dimengerti dari ide di balik aslinya redux-promise. Ini sedang dalam pengembangan aktif, dan juga dilengkapi dengan baik oleh redux-promise-reducer.
ada perantara tambahan serupa yang tersedia untuk membuat / mengurutkan tindakan kompleks Anda: salah satu yang sangat populer adalah redux-saga, yang sangat mirip dengan redux-thunk, tetapi didasarkan pada sintaks fungsi generator. Sekali lagi, Anda mungkin akan menggunakannya bersamaan dengan redux-promise.
Berikut adalah artikel bagus yang secara langsung membandingkan berbagai opsi komposisi asinkron, termasuk thunk dan redux-promise-middleware. (TL; DR: "Redux Promise Middleware mengurangi boilerplate cukup dramatis vs beberapa opsi lain" ... "Saya rasa saya suka Saga untuk aplikasi yang lebih kompleks (baca:" menggunakan "), dan Redux Promise Middleware untuk yang lainnya." )
Perhatikan bahwa ada kasus penting di mana Anda mungkin berpikir Anda perlu mengirimkan beberapa tindakan, tetapi sebenarnya tidak, dan Anda dapat membuat hal-hal sederhana tetap sederhana. Di situlah Anda hanya ingin beberapa pereduksi bereaksi terhadap panggilan asinkron Anda. Namun, tidak ada alasan sama sekali mengapa beberapa reduksi tidak dapat memantau satu jenis tindakan. Anda hanya ingin memastikan bahwa tim Anda tahu Anda menggunakan konvensi itu, jadi mereka tidak menganggap hanya satu peredam (dengan nama terkait) yang dapat menangani tindakan tertentu.

Question 4

Pengungkapan penuh: Saya relatif baru dalam pengembangan Redux dan berjuang dengan pertanyaan ini sendiri. Saya akan memparafrasekan jawaban paling ringkas yang saya temukan:

ReduxPromise mengembalikan sebuah janji sebagai payload ketika suatu tindakan dikirim, dan kemudian middleware ReduxPromise bekerja untuk menyelesaikan janji itu dan meneruskan hasilnya ke peredam.

ReduxThunk, di sisi lain, memaksa pembuat tindakan untuk menunda pengiriman objek tindakan ke reduksi sampai pengiriman dipanggil.

Berikut tautan ke tutorial tempat saya menemukan info ini: https://blog.tighten.co/react-101-part-4-firebase .