React-Redux'da hata işlemenin doğru yolu

React-Redux ile hata işlemenin daha genel veya doğru yolunun ne olduğunu anlamak istiyorum.

Varsayalım, telefon numarası kayıt bileşenim var.

Bu Bileşen, girilen telefon numarasının geçersiz olup olmadığını söyleyen bir hata atar

Bu hatayı ele almanın en iyi yolu ne olabilir?

Fikir 1: Hata alan ve bir hata iletildiğinde bir eylem gönderen bir bileşen oluşturun

2. fikir: Hata bu bileşenle ilgili olduğundan, bu hatayı bir bileşene iletin (redux'a bağlı olmayan, yani hata işleyici bileşeni eylemi göndermeyecektir)

Soru: Birisi bana büyük ölçekli uygulama için React-Redux'da doğru hata yönetimi konusunda rehberlik edebilir mi?

İlk fikirlerinizin hiçbirinin tüm resmi yakalamadığını söyleyebilirim. Fikir 1 sadece bir geri aramadır. Bir geri arama kullanmak istiyorsanız: useCallback. Idea 2 çalışır ve redux kullanmanız gerekmiyorsa tercih edilir. Bazen redux kullanmak daha iyi olur. Belki de giriş alanlarının hiçbirinde hata veya benzeri bir şey olmadığını kontrol ederek form geçerliliğini ayarlıyorsunuzdur. Redux konusunda olduğumuz için, durumun böyle olduğunu varsayalım.

Genellikle redux ile hata işlemeye en iyi yaklaşım, bir hata bileşenine iletilen bir hata alanına sahip olmaktır.

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

Hata bileşeni sadece bir hata göstermek zorunda değildir, aynı zamanda yan etkiler de yapabilir useEffect.

Hatanın nasıl ayarlandığı / ayarlanmadığı uygulamanıza bağlıdır. Telefon numarası örneğinizi kullanalım.

1. Geçerlilik kontrolü saf bir işlevse, redüktörde yapılabilir.

Daha sonra telefon numarası değiştirme eylemlerine yanıt olarak hata alanını ayarlayabilir veya ayarını kaldırabilirsiniz. Bir switch ifadesi ile inşa edilmiş bir redüktörde bu gibi görünebilir.

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

2. Hatalar arka uç tarafından bildirilirse, hata eylemlerini gönderin.

Telefon numarasını, numarayla ilgili bir şey yapmadan önce doğrulama yapan bir arka uca gönderdiğinizi varsayalım. Verilerin istemci tarafında geçerli olup olmadığını bilemezsiniz. Bunun için sunucunun sözünü tutmanız yeterlidir.

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],
);

Redüktör daha sonra hata için uygun bir mesaj bulmalı ve ayarlamalıdır.

Hatayı düzeltmeyi unutmayın. Bir değişiklik eyleminde veya uygulamaya bağlı olarak başka bir istekte bulunurken hatayı kaldırabilirsiniz.

Belirttiğim iki yaklaşım birbirini dışlamıyor. İlki yerel olarak algılanabilir hataları görüntülemek için, ikincisini sunucu tarafı veya ağ hatalarını görüntülemek için kullanabilirsiniz.

Ben yup doğrulaması ile bir formik kullanmak istiyorum. sonra, sunucu tarafı hatası için ben böyle bir şey kullanmak istiyorum:

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>;
};

Ne tür bir hata işlemeden bahsettiğinize bağlıdır. Sadece form doğrulama işlemi ise, bunun için Redux'a ihtiyacınız olduğunu düşünmüyorum - lütfen bu makaleyi okuyun . Hatanız yalnızca bu bileşen içinde "tüketilecekse", neden redux'a gönderesiniz? Bunun için yerel eyaletinizi kolayca kullanabilirsiniz.

Öte yandan, kullanıcılara sitedeki herhangi bir HTTP çağrısının başarısız olup olmadığını belirten bir tür hata bildirimi göstermek istiyorsanız, uygulamanızın tüm bölümlerinden (hatta genel olarak ara katman yazılımınızdan) hata göndererek redux'dan yararlanabilirsiniz.

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
}

Eyaletinizin nasıl organize edileceğini ve bir durumu redux'a mı koymanız yoksa sadece bileşeninizin yerel durumunda tutmanız mı gerektiğini tanımlamanız gerekir. Her şeyi redux'a koyabilirsiniz, ama kişisel olarak bunun aşırıya kaçması olduğunu söyleyebilirim - sadece Y bileşeni bu durumu önemsiyorsa neden X bileşenini Y bileşenine koydunuz? Kodunuzu doğru bir şekilde yapılandırırsanız, uygulamanızın diğer bölümleri bu duruma bağlı olmaya başlarsa, bu durumu yerelden redux'a taşıma konusunda sorun yaşamamanız gerekir.

Ben böyle düşünüyorum, devlet ne olmalı? Devletten ne tür bir şey çıkarılmalıdır? Durum redux'da saklanmalı ve türevler hesaplanmalıdır.

Bir telefon numarası, hangi alanın odağı olduğu durumdur, ancak geçerli olup olmadığı durumdaki durumlardan türetilebilir.

Türevleri önbelleğe almak ve ilgili durum değiştirilmediğinde aynı sonuçları döndürmek için Yeniden Seç'i kullanırdım.

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

Daha sonra bu değeri önemseyen tüm bileşenlerde mapStateToProps öğesinde seçiciyi kullanabilir ve eşzamansız eylemlerde de kullanabilirsiniz. Odak değişmediyse veya alanın değeri değişmediyse, yeniden hesaplama olmaz, bunun yerine önceki değeri döndürür.

Ben sadece birden fazla devlet parçasının bir türetme ile sonuçlanmak için nasıl bir araya gelebileceğini göstermek için seçilen durum kontrolünü ekliyorum.

Durumumu olabildiğince küçük tutarak kişisel olarak olaylara yaklaşmaya çalışıyorum. Örneğin, kendi takviminizi oluşturmak istediğinizi varsayalım. Her gün eyalette depolanacak mısınız, yoksa şu anda görüntülenmekte olan yıl ve ay gibi birkaç şey bilmeniz gerekiyor mu? Sadece bu 2 durumla, bir takvimde görüntülenecek günleri hesaplayabilirsiniz ve bunlardan biri değişene kadar yeniden hesaplamanıza gerek yoktur ve bu yeniden hesaplama neredeyse otomatik olarak gerçekleşir, tüm tiyatro yollarını düşünmeye gerek yoktur değişiklik.