reactjs - Cara yang benar untuk menangani status error di komponen Redux Saga


Saya memiliki sebuah komponen fungsi React yang mengirimkan aksi yang memicu sebuah Saga yang melakukan dua hal. Pertama, ia menghubungi API untuk mendapatkan beberapa data, kemudian ia menetapkan beberapa state berdasarkan responsnya. Jika panggilan API berhasil, ia menetapkan dua bagian state, jika tidak, ia menetapkan sebuah error.

Di komponen tersebut, kita ingin menavigasi ke halaman lain hanya jika hasil dari dispatch bukan menetapkan error, tetapi karena state error tidak tersedia segera setelah dispatch, kita harus menggunakan solusi sementara yang agak rumit dengan useEffect:

export const ProductDetailsPage = () => {

    const error = useSelector(selectError) as Error
    // ... other useState variables here

    // triggered by a button press:
    const onContinue = () => {
        dispatch(setPdpProductSagaAction(selectedProduct, serviceBuilderId))
        // ideally we would be able to navigate here, or not, based on the error state
        // set by the dispatch call
    }

    // hacky workaround to ensure the error state is clear
    // AND we've dispatched the correct action before routing
    useEffect(() => {
        if (error === emptyError && deviceId) {
          history.push('/nextpage')
        } else {
          console.log('failed to get deviceId')
        }
    }, [error, deviceId])
}

Berikut adalah saga yang terlibat dalam pengiriman:

export function* setPdpProductSaga() {
  yield takeLeading(SET_PDP_PRODUCT, action => setPdpProduct(action, api))
}

export function* setPdpProduct(action: any, api: any): any {
  yield put(setDeviceErrorAction(emptyError))

  const response = yield call(
    api.postDevice,
    action.payload.serviceBuilderId,
    action.payload.product.sku
  )

  if (response.error !== emptyError) {
    yield put(setDeviceErrorAction(response.error))
  } else {
    yield put(setPdpProductAction(action.payload.product))
    yield put(setDeviceIdAction(response.deviceId))
  }
}

Ini berhasil tapi... apakah ada cara yang lebih baik untuk melakukan ini?