Cara penanganan kesalahan yang benar dalam React-Redux

Saya ingin memahami apa yang lebih umum atau cara penanganan kesalahan yang benar dengan React-Redux.

Misalkan, saya memiliki komponen pendaftaran nomor telepon.

Komponen itu melempar kesalahan mengatakan jika nomor telepon input tidak valid

Apa yang akan menjadi cara terbaik untuk menangani kesalahan itu?

Ide 1: Buat komponen, yang mengambil kesalahan dan mengirimkan tindakan setiap kali kesalahan diteruskan ke sana

ide 2: Karena kesalahan terkait dengan komponen itu, meneruskan kesalahan itu ke komponen (yang tidak terhubung ke redux yaitu komponen penangan kesalahan tidak akan mengirimkan tindakan)

Pertanyaan: Dapatkah seseorang memandu saya tentang cara penanganan kesalahan yang tepat dalam React-Redux untuk aplikasi skala besar?

Saya akan mengatakan bahwa tidak satu pun dari ide awal Anda menangkap seluruh gambaran. Ide 1 hanyalah sebuah panggilan balik. Jika Anda ingin menggunakan callback: useCallback. Ide 2 akan berfungsi dan lebih disukai jika Anda tidak perlu menggunakan redux. Terkadang Anda lebih baik menggunakan redux. Mungkin Anda menetapkan validitas formulir dengan memeriksa tidak ada bidang input yang memiliki kesalahan atau yang serupa. Karena kita berada di topik redux, mari kita asumsikan itu masalahnya.

Biasanya pendekatan terbaik untuk penanganan kesalahan dengan redux adalah memiliki bidang kesalahan dalam keadaan yang kemudian diteruskan ke komponen kesalahan.

const ExampleErrorComponent= () => {
  const error = useSelector(selectError);
  if (!error) return null;
  return <div className="error-message">{error}</div>;
}

Komponen kesalahan tidak harus hanya menampilkan kesalahan, itu juga bisa melakukan efek samping useEffect.

Bagaimana kesalahan diatur / tidak disetel tergantung pada aplikasi Anda. Mari kita gunakan contoh nomor telepon Anda.

1. Jika pemeriksaan validitas adalah fungsi murni, itu dapat dilakukan di peredam.

Anda kemudian akan mengatur atau menghapus bidang kesalahan dalam menanggapi tindakan perubahan nomor telepon. Dalam peredam yang dibangun dengan pernyataan switch itu bisa terlihat seperti ini.

case 'PHONE_NUMBER_CHANGE':
  return {
    ...state,
    phoneNumber: action.phoneNumber,
    error: isValidPhoneNumber(action.phoneNumber) ? undefined : 'Invalid phone number',
  };

2. Jika kesalahan dilaporkan oleh backend, kirim tindakan kesalahan.

Katakanlah Anda mengirim nomor telepon ke backend yang melakukan validasi sebelum melakukan sesuatu dengan nomor tersebut. Anda tidak dapat mengetahui apakah data tersebut valid di sisi klien. Anda hanya perlu mengambil kata server untuk itu.

const handleSubmit = useCallback(
  () => sendPhoneNumber(phoneNumber)
    .then(response => dispatch({
      type: 'PHONE_NUMBER_SUBMISSION_SUCCESS',
      response,
    }))
    .catch(error => dispatch({
      type: 'PHONE_NUMBER_SUBMISSION_FAILURE',
      error,
    })),
  [dispatch, phoneNumber],
);

Peredam kemudian harus datang dengan pesan yang sesuai untuk kesalahan dan mengaturnya.

Jangan lupa untuk menghapus kesalahan. Anda dapat menghapus kesalahan pada tindakan perubahan atau saat membuat permintaan lain tergantung pada aplikasi.

Dua pendekatan yang saya uraikan tidak saling eksklusif. Anda dapat menggunakan yang pertama untuk menampilkan kesalahan yang terdeteksi secara lokal dan juga menggunakan yang kedua untuk menampilkan sisi server atau kesalahan jaringan.

Saya akan menggunakan formik dengan validasi yup. kemudian, untuk kesalahan sisi server saya akan menggunakan sesuatu seperti ini:

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Spinner } from "@blueprintjs/core";

export default ({ action, selector, component, errorComponent }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(action());
  }, [dispatch, action]);

  const DispatchFetch = () => {
    const { data, isRequesting, error } = useSelector(selector());
    if (!isRequesting && data) {
      const Comp = component;
      return <Comp data={data}></Comp>;
    } else if (error) {
      if (errorComponent) {
        const ErrorComp = errorComponent;
        return <ErrorComp error={error}></ErrorComp>;
      }
      return <div>{error}</div>;
    }
    return <Spinner></Spinner>;
  };

  return <DispatchFetch></DispatchFetch>;
};

Itu tergantung pada jenis penanganan kesalahan apa yang Anda bicarakan. Jika itu hanya penanganan validasi formulir maka saya tidak berpikir Anda perlu Redux untuk itu - silakan baca artikel ini . Jika kesalahan Anda hanya akan "dikonsumsi" dalam komponen itu, mengapa mengirimnya ke redux? Anda dapat dengan mudah menggunakan negara bagian Anda untuk itu.

Di sisi lain, jika Anda ingin menunjukkan semacam pemberitahuan kesalahan kepada pengguna yang menunjukkan apakah panggilan HTTP di situs gagal, Anda dapat memanfaatkan redux dengan mengirimkan kesalahan dari semua bagian aplikasi Anda (atau bahkan secara umum middleware Anda)

dispatch({ type: 'SET_ERROR_MESSAGE', error: yourErrorOrMessage });

// simple error message reducer
function errorMessage(state = null, action) {
  const { type, error } = action;

  switch (type) {
      case 'RESET_ERROR_MESSAGE':
          return null;
      case 'SET_ERROR_MESSAGE':
          return error;
  }

  return state
}

Anda perlu menentukan bagaimana keadaan Anda akan diatur dan apakah Anda perlu menempatkan beberapa negara redux atau hanya menyimpannya dalam keadaan lokal komponen Anda. Anda bisa meletakkan semuanya dalam redux, tetapi secara pribadi saya akan mengatakan itu adalah pembunuhan yang berlebihan - mengapa Anda menempatkan negara X dalam komponen Y jika hanya komponen Y yang peduli tentang keadaan itu? Jika Anda menyusun kode dengan benar, Anda seharusnya tidak memiliki masalah dengan memindahkan status itu dari lokal ke redux nanti, jika karena alasan tertentu bagian lain dari aplikasi Anda mulai bergantung pada keadaan itu.

Saya memikirkannya seperti ini, apa yang seharusnya negara? Dan apa yang harus diturunkan dari negara? Negara harus disimpan dalam redux, dan derivasi harus dihitung.

Nomor telepon adalah status, bidang mana yang memiliki fokus adalah status, tetapi apakah itu valid atau tidak, itu dapat diturunkan dari nilai dalam status.

Saya akan menggunakan Pilih kembali ke cache derivasi dan mengembalikan hasil yang sama ketika negara yang relevan belum dimodifikasi.

export const showInvalidPhoneNumberMessage = createSelector(
  getPhoneValue,
  getFocusedField,
  (val, focus) => focus !== 'phone' && val.length < 10 // add other validations.
)

Anda kemudian dapat menggunakan pemilih di mapStateToProps di semua komponen yang mungkin peduli dengan nilai ini, dan Anda bisa menggunakannya dalam tindakan async juga. Jika fokus tidak berubah, atau nilai bidang tidak berubah, maka tidak ada perhitungan ulang akan terjadi, itu akan mengembalikan nilai sebelumnya.

Saya menambahkan cek status yang dipilih hanya untuk menunjukkan bagaimana beberapa bagian dari negara dapat bersama-sama menghasilkan satu derivasi.

Saya pribadi mencoba mendekati sesuatu dengan menjaga negara saya sekecil mungkin. Misalnya, katakanlah Anda ingin membuat kalender Anda sendiri. Apakah Anda menyimpan setiap hari dalam keadaan, atau apakah Anda hanya perlu mengetahui beberapa hal seperti tahun dan bulan saat ini sedang dilihat. Dengan hanya 2 buah status ini, Anda dapat menghitung hari untuk ditampilkan pada kalender, dan tidak perlu menghitung ulang sampai salah satu dari mereka berubah, dan perhitungan ulang ini akan terjadi secara otomatis, tidak perlu memikirkan semua cara yang dapat mereka lakukan. perubahan.