Cara Mengambil Data Dengan Redux-Saga di Aplikasi React

React dan Redux adalah alat pengembangan web yang populer untuk mengelola status dan mengembangkan antarmuka pengguna yang dinamis.

Mengakses informasi bisa jadi sulit dan memakan waktu, terutama saat berhadapan dengan kejadian asinkron. Redux-Saga, paket middleware yang mudah digunakan yang mengelola aktivitas asinkron, dapat menyederhanakan proses ini.

Pelajari bagaimana Bereaksi untuk membuat aplikasi yang mengambil data dari Redux-Saga.

Memahami Redux-Saga

Redux-Saga adalah paket middleware yang mempermudah pengelolaan dan pengujian efek samping seperti akses penyimpanan browser dan permintaan API asinkron. Menggunakan fungsi generator membuat kode asinkron tampak sinkron, membuatnya lebih mudah untuk dipikirkan dan di-debug.

Redux-Saga bekerja dengan mencari tindakan Redux tertentu dan memicu Sagas, yang merupakan fungsi penghasil efek samping. Sagas dapat menjalankan operasi asinkron, seperti mendapatkan data dari API, lalu mengirim tindakan Redux baru untuk memperbarui status.

Ambil contoh penggunaan Redux-Saga untuk mengelola panggilan API asinkron. Mulailah dengan membuat tindakan Redux yang memulai prosedur pengumpulan data:

eksporconst FETCH_DATA = 'FETCH_DATA';
eksporconst ambil Data = (parameter) => ({
 ketik: FETCH_DATA,
 muatan: param,
});

Muatan tindakan, FETCH_DATA, menyertakan parameter penting apa pun, seperti titik akhir API dan parameter permintaan.

Selanjutnya, tentukan Saga yang mendengarkan aktivitas FETCH_DATA dan melakukan pengumpulan data:

impor { panggil, masukkan, ambil Terbaru } dari'redux-saga/efek';
impor axios dari'axios';
eksporfungsi* ambilDataSaga(tindakan) {
mencoba {
const tanggapan = menghasilkan panggil (axios.get, action.payload.endpoint, {
 params: action.payload.params,
 });
menghasilkan meletakkan({ jenis: 'FETCH_DATA_SUCCESS', muatan: respon.data });
 } menangkap (kesalahan) {
menghasilkan meletakkan({ jenis: 'FETCH_DATA_ERROR', muatan: kesalahan });
 }
}
eksporfungsi* watchFetchData() {
menghasilkan takeLatest (FETCH_DATA, fetchDataSaga);
}

Saga ini membuat panggilan API ke axios perpustakaan dengan menggunakan panggilan memengaruhi. Ini kemudian mengirimkan data yang diambil sebagai muatan tindakan Redux baru dengan tipe FETCH_DATA_SUCCESS. Jika terjadi kesalahan, ia mengirimkan tindakan Redux baru dengan objek kesalahan sebagai muatan dan jenis FETCH_DATA_ERROR.

Terakhir, Anda perlu mendaftarkan Saga ke toko Redux menggunakan middleware redux-saga:

impor { applyMiddleware, createStore } dari'redux';
impor createSagaMiddleware dari'redux-saga';
impor rootReducer dari'./pengurang';
const sagaMiddleware = buatSagaMiddleware();
const store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);

Dengan mendaftarkan watchFetchData Saga dengan middleware instance baru, kode ini membuat yang lain redux-saga. Middleware diatur di toko Redux menggunakan TerapkanMiddleware.

Redux-Saga, secara umum, memberikan pendekatan yang kuat dan serbaguna untuk mengelola aktivitas asinkron di dalamnya Bereaksi Redux aplikasi. Anda dapat menyederhanakan pengambilan data dan menghasilkan kode yang lebih mudah untuk diuji, dipelihara, dan diperbarui dengan menggunakan Sagas untuk mengontrol bug kode.

Masalah Umum Pengambilan Data di Aplikasi React

Ada beberapa kesulitan yang sering ditemukan pengembang saat menggunakan pengambilan data React. Berikut beberapa contohnya:

1. Mengelola tindakan asinkron: Ini adalah informasi yang diberikan oleh antarmuka pemrograman yang melacak operasi yang tidak bersamaan tanpa mengganggu antarmuka pengguna (UI). Bekerja dengan beberapa permintaan API atau data yang bergantung pada data lain mungkin membuat ini sulit.
2. Menangani kesalahan: Panggilan API bisa gagal, dan sangat penting bagi Anda untuk menangani kesalahan ini dengan benar. Ini termasuk memberikan pesan kesalahan kepada pengguna dan mengizinkan mereka untuk mengirim ulang permintaan.
3. Memperbarui toko Redux: Anda harus menyimpan informasi yang diperoleh dari API di toko Redux agar komponen lain dapat mengaksesnya. Sangat penting untuk memperbarui toko tanpa mengganggu atau merusak data yang sudah ada.

Cara Menggunakan Redux-Saga untuk Pengambilan Data di React

Menggunakan Redux-Saga untuk pengambilan data memungkinkan Anda memisahkan logika untuk membuat panggilan API dan menangani respons dari komponen React Anda. Akibatnya, Anda dapat fokus pada rendering data dan bereaksi terhadap interaksi pengguna sementara Sagas menangani pengambilan data asinkron dan manajemen kesalahan.

Anda perlu mendaftarkan watchFetchData Saga dengan Redux-Saga middleware untuk menggunakan Sagas di toko Redux kami:

// src/toko.js
impor { createStore, applyMiddleware } dari'redux';
impor createSagaMiddleware dari'redux-saga';
impor rootReducer dari'./pengurang';
impor { watchFetchData } dari'./saga/dataSaga';
const sagaMiddleware = buatSagaMiddleware();
const store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (watchFetchData);
eksporbawaan toko;

Kode ini mendaftarkan sagaMiddleware dengan toko Redux menggunakan applyMiddleware fungsi dan createSagaMiddleware metode dari redux-saga kemasan. Kemudian, menggunakan berlari metode, itu mengeksekusi watchFetchData Kisah.

Penyiapan Redux-Saga Anda selesai sekarang karena setiap komponen sudah terpasang. Saga menggunakan ambilDataApi berfungsi untuk mengambil data saat komponen React Anda mengirimkan aksi FETCH_DATA_REQUEST. Jika pengambilan data terjadwal berhasil, aktivitas lain dengan data yang diambil akan dikirim. Jika ada kesalahan, itu mengirimkan tindakan baru dengan objek kesalahan.

// src/components/DataComponent.js
impor Bereaksi, { useEffect } dari'reaksi';
impor { useDispatch, useSelector } dari'bereaksi-redux';
impor { ambilDataRequest } dari'../tindakan/dataAksi';
const DataKomponen = () => {
const pengiriman = useDispatch();
const { data, isLoading, error } = useSelector((negara) => negara bagian.data);
 gunakanEfek(() => {
 pengiriman (fetchDataRequest({ parameter1: 'nilai1', parameter2: 'nilai2' }));
 }, [menugaskan]);
jika (memuat) {
kembali<div>Memuat...div>;
 }
jika (kesalahan) {
kembali<div>Kesalahan: {error.message}div>;
 }
kembali (



 {data.peta((barang) => (
{item.nama}</div>
 ))}
 </div>
 );
};
eksporbawaan Komponen Data;

Pada contoh di atas, Anda menggunakan the useSelector kaitkan komponen React Anda untuk mendapatkan data, sedang Memuat, Dan kesalahan nilai dari toko Redux. Anda juga mengirimkan tindakan FETCH_DATA_REQUEST menggunakan useEffect() pengait saat komponen terpasang. Anda merender data, memuat pesan, atau pesan kesalahan tergantung pada data nilai, sedang Memuat, Dan kesalahan.

Dengan memanfaatkan Redux-Saga untuk pengambilan data, mengelola permintaan API asinkron dalam aplikasi React dapat disederhanakan secara signifikan. Anda dapat membuat kode yang lebih mudah dikelola dan modular dengan mengisolasi logika panggilan API dari komponen Anda dan mengelola aliran asinkron di Sagas.

Praktik Terbaik untuk Menggunakan Redux-Saga untuk Pengambilan Data

Ikuti praktik terbaik ini saat menggunakan Redux-Saga untuk pengambilan data:

1. Gunakan Saga yang berbeda untuk setiap operasi pengambilan data. Dianjurkan untuk memisahkan Saga untuk setiap proses pengambilan data daripada memasukkan semua logika ke dalam satu Saga. Mempertahankan dan mengubah kode lebih mudah karena Anda dapat langsung menemukan Saga yang relevan untuk aktivitas tertentu.
2. Gunakan penanganan kesalahan bawaan Redux-Saga. Anda dapat menggunakan blok coba/tangkap Redux-Saga untuk menangani kesalahan secara otomatis. Ini memungkinkan kami untuk mengelola kegagalan secara terpusat dan memberikan pesan kesalahan yang seragam kepada pengguna.
3. Gunakan saga yang dapat dibatalkan untuk kinerja yang lebih baik. Saat Anda menggunakan komponen React, itu dapat memicu banyak panggilan API. Situasi balapan dan panggilan antarmuka Pemrograman yang tidak perlu dapat dihasilkan dari pemicu API ini. Dengan membatalkan panggilan API yang sedang berlangsung saat membuat permintaan baru, Anda dapat mencegahnya.
4. Gunakan data terbaru. Saat membuat beberapa permintaan API untuk data yang sama, sangat penting untuk memastikan bahwa mereka menggunakan data terbaru. Menggunakan terbaru efek, Redux-Saga membantu Anda mencapai ini. Efeknya memastikan bahwa Anda menggunakan panggilan API terbaru atau terbaru dan membatalkan semua permintaan API yang tertunda untuk data yang sama.
5. Gunakan file terpisah untuk saga. Anda harus memisahkan Sagas dari file penyimpanan Redux. Hasilnya, Saga Anda akan lebih mudah dikendalikan dan diuji.

Ambil Data Dengan Redux-Saga

Redux-Saga menawarkan metode yang andal dan fleksibel untuk menangani tugas asinkron dalam aplikasi React. Menggunakan Sagas, Anda dapat membuat kode yang lebih kuat, dapat diuji, dan fleksibel yang memisahkan masalah.

Pengambilan data bisa menjadi operasi yang sulit dan rawan kesalahan, tetapi Anda dapat membuatnya lebih sederhana dengan bantuan Redux-Saga. Redux-Saga meningkatkan pengalaman pengguna dengan memungkinkan Anda mengelola banyak proses asinkron secara andal dan dapat diprediksi.

Karena banyak manfaat dan fiturnya, Redux-Saga adalah tambahan yang fantastis untuk koleksi alat pengembangan React Anda.