Bagaimana untuk membuat aliran Redux Saga untuk panggilan API?

Gunakan Redux Saga untuk memudahkan aliran kerja API dalam projek React/React Native

Artikel ini bukan panduan pakar, tetapi ia akan cuba menerangkan cara memanfaatkan Redux Saga untuk mengendalikan kesan sampingan dalam projek React atau React Native anda. Jika aplikasi anda melibatkan banyak panggilan API, Redux Saga boleh memudahkan proses dan menjadikan kod lebih mudah diurus.

Mengapa memilih Redux Saga?

Redux Saga ialah perisian tengah yang menguruskan kesan sampingan (seperti panggilan API) dengan cara yang jelas dan boleh diramal. Daripada memasukkan logik API dalam komponen atau pengurang, anda boleh mewakilkan tugas ini kepada saga. Saga membolehkan anda menulis kod tak segerak yang kelihatan segerak, menggunakan fungsi JavaScript khas yang dipanggil penjana.

Tetapkan struktur folder

Sebelum mendalami saga, pastikan anda menstruktur projek anda supaya ia boleh berskala. Berikut ialah struktur asas yang saya ikuti:

• Perkhidmatan: Mengandungi titik akhir API dan fungsi yang memanggilnya.
• Pengurang: Urus perubahan keadaan berdasarkan respons API.
• Sagas: Kendalikan kesan sampingan (seperti panggilan API) dan selaraskan kerja dengan pengurang.

1. Perkhidmatan: mengendalikan titik akhir API

Folder Perkhidmatan mengandungi fungsi panggilan API boleh guna semula. Berikut ialah contoh API "Tukar Kata Laluan":

// ChangePasswordService.js
import {Constants} from '../../Config';
import Ajax from './base';

const BASE_URL = Constants.IS_DEVELOPING_MODE
  ? Constants.BASE_URL.DEV
  : Constants.BASE_URL.PROD;

export default {
  ChangePassword: async params => {
    return fetch(`${BASE_URL}api/change-password`, {
      method: 'POST',
      body: params,
      headers: {
        Accept: 'multipart/form-data',
      },
    })
      .then(response => Ajax.handleResponse(response))
      .then(data => {
        console.log('Data', data);
        return data;
      });
  },
};

Di sini, kami mentakrifkan fungsi ChangePassword untuk membuat panggilan API. Ia menggunakan fetch untuk menghantar permintaan POST ke titik akhir dan fungsi pembantu (Ajax.handleResponse) untuk mengendalikan respons.

2. Pengurang: Kemas kini status

Pengurang mendengar tindakan yang dihantar dan mengemas kini status dengan sewajarnya. Berikut ialah pengurang untuk mengurus perubahan kata laluan:

// PasswordChangeSlice.js
import {createSlice} from '@reduxjs/toolkit';

const passwordChangeSlice = createSlice({
  name: 'passwordChange',
  initialState: {
    data: null,
    isChangeSuccess: null,
    error: null,
    message: null,
  },
  reducers: {
    changePassword: state => {
      state.isChangeSuccess = null;
      state.error = null;
      state.message = '';
    },
    changePasswordSuccess: (state, action) => {
      state.data = action.payload;
      state.message = 'Password changed successfully';
      state.isChangeSuccess = true;
    },
    changePasswordFail: (state, action) => {
      state.error = action.payload;
      state.message = 'Something went wrong';
      state.isChangeSuccess = false;
    },
  },
});

export const {changePassword, changePasswordSuccess, changePasswordFail} =
  passwordChangeSlice.actions;

export default passwordChangeSlice.reducer;

Pengurang ini mempunyai tiga tindakan:

• changePassword: Tetapkan semula keadaan apabila permintaan bermula.
• changePasswordSuccess: Kemas kini status dengan data kejayaan.
• changePasswordFail: Kemas kini status dengan maklumat ralat.

3. Sagas: Mengurus Kesan Sampingan

Sekarang to the point! Saga mengendalikan panggilan API sebenar dan menghantar tindakan berdasarkan respons. Berikut ialah kisah untuk API "Tukar Kata Laluan":

import {all, call, put, takeEvery} from 'redux-saga/effects';
import API from '../Services/ChangePasswordService';
import {
  changePasswordFail,
  changePasswordSuccess,
} from '../Reducers/PasswordChangeSlice';

function* changePasswordSaga({payload}) {
  try {
    const response = yield call(API.ChangePassword, payload);
    if (response?.data) {
      yield put(changePasswordSuccess(response.data));
    } else if (response?.errors) {
      yield put(changePasswordFail(response.errors));
    }
  } catch (error) {
    yield put(changePasswordFail(error.message));
  }
}

function* passwordSaga() {
  yield all([
    takeEvery('passwordChange/changePassword', changePasswordSaga),
  ]);
}

export default passwordSaga;

• call: Panggil fungsi API (API.ChangePassword) dan tunggu hasilnya.
• put: menghantar tindakan untuk mengemas kini status.
• takeEvery: Dengar tindakan tertentu (changePassword) dan cetuskan kisah pekerja yang sepadan (changePasswordSaga).

Jika panggilan API berjaya, saga akan mengeluarkan changePasswordSuccess; jika gagal, changePasswordFail akan dipancarkan.

4. Cakuk: Sambungkan komponen

Untuk mencetuskan proses, kami membuat cangkuk tersuai untuk menghantar tindakan changePassword:

// useChangePasswordActions.js
import {useDispatch, useSelector} from 'react-redux';
import {changePassword} from '../Reducers/PasswordChangeSlice';

export const useChangePasswordActions = () => {
  const dispatch = useDispatch();
  const passwordState = useSelector(state => state?.changePassword);

  const changePasswordCall = params => {
    dispatch(changePassword(params));
  };

  return {
    passwordState,
    changePasswordCall,
  };
};

Cara ia berfungsi

• Pengagihan tindakan: Komponen memanggil changePasswordCall dalam cangkuk tersuai.
• Pengurang: changePassword tindakan mengemas kini status untuk menunjukkan bahawa permintaan sedang dijalankan.
• Saga: saga pemerhati mendengar changePassword dan mencetuskan saga pekerja.
• Panggilan API: Saga pekerja memanggil API ChangePassword dan mengendalikan respons.
• Kemas kini status: Saga mengedarkan tindakan kejayaan atau kegagalan dan mengemas kini status melalui pengurang.

Ringkasan

Persediaan ini mengatur aliran kerja API anda ke dalam langkah yang jelas dan boleh diurus:

• Perkhidmatan mengendalikan logik API.
• Pengurang status kemas kini.
• Sagas mengendalikan kesan sampingan dan gam semuanya bersama-sama.

Ingat, ini hanyalah satu cara untuk mengatur projek anda. Jika anda mempunyai lebih banyak pengalaman atau idea, sila berasa bebas untuk mengulas dengan strategi anda. Saya akan membincangkan lebih lanjut tentang saga dalam artikel akan datang sambil saya belajar dan menambah baik.

Selamat pengaturcaraan! ?

Atas ialah kandungan terperinci Bagaimana untuk membuat aliran Redux Saga untuk panggilan API?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!