Apa cara terbaik untuk menangani kesalahan pengambilan di react redux?

Saya memiliki satu peredam untuk Klien, satu lagi untuk AppToolbar dan beberapa lainnya ...

Sekarang katakanlah saya membuat tindakan pengambilan untuk menghapus klien, dan jika gagal saya memiliki kode di peredam Klien yang seharusnya melakukan beberapa hal, tetapi saya juga ingin menampilkan beberapa kesalahan global di AppToolbar.

Tetapi klien dan pengurang AppToolbar tidak berbagi bagian yang sama dari status dan saya tidak dapat membuat tindakan baru di peredam.

Jadi bagaimana saya bisa menunjukkan kesalahan global? Terima kasih

UPDATE 1:

Saya lupa menyebutkan bahwa saya menggunakan este devstack

PEMBARUAN 2: Saya menandai jawaban Eric sebagai benar, tetapi saya harus mengatakan bahwa solusi yang saya gunakan di este lebih seperti kombinasi jawaban Eric dan Dan ... Anda hanya perlu menemukan yang paling cocok untuk Anda dalam kode Anda .. .

Jika Anda ingin memiliki konsep "kesalahan global", Anda dapat membuat errorsperedam, yang dapat mendengarkan tindakan addError, removeError, dll .... Kemudian, Anda dapat menghubungkan ke pohon status Redux Anda di state.errorsdan menampilkannya di mana saja sesuai.

Ada beberapa cara untuk mendekati ini, tetapi gagasan umumnya adalah bahwa kesalahan / pesan global akan membutuhkan peredamnya sendiri untuk hidup sepenuhnya terpisah dari <Clients />/ <AppToolbar />. Tentu saja jika salah satu dari komponen ini membutuhkan akses, errorsAnda dapat errorsmenurunkannya sebagai penyangga di mana pun diperlukan.

Pembaruan: Contoh Kode

Berikut adalah salah satu contoh tampilan jika Anda meneruskan "kesalahan global" errorske tingkat teratas <App />dan merendernya secara bersyarat (jika ada kesalahan). Menggunakan react-reduxconnect untuk menghubungkan <App />komponen Anda ke beberapa data.

// App.js
// Display "global errors" when they are present
function App({errors}) {
  return (
    <div>
      {errors && 
        <UserErrors errors={errors} />
      }
      <AppToolbar />
      <Clients />
    </div>
  )
}

// Hook up App to be a container (react-redux)
export default connect(
  state => ({
    errors: state.errors,
  })
)(App);

Dan sejauh menyangkut pencipta tindakan, itu akan mengirimkan ( redux-thunk ) kegagalan sukses sesuai dengan respons

export function fetchSomeResources() {
  return dispatch => {
    // Async action is starting...
    dispatch({type: FETCH_RESOURCES});

    someHttpClient.get('/resources')

      // Async action succeeded...
      .then(res => {
        dispatch({type: FETCH_RESOURCES_SUCCESS, data: res.body});
      })

      // Async action failed...
      .catch(err => {
        // Dispatch specific "some resources failed" if needed...
        dispatch({type: FETCH_RESOURCES_FAIL});

        // Dispatch the generic "global errors" action
        // This is what makes its way into state.errors
        dispatch({type: ADD_ERROR, error: err});
      });
  };
}

Meskipun peredam Anda dapat dengan mudah mengelola serangkaian kesalahan, menambahkan / menghapus entri dengan tepat.

function errors(state = [], action) {
  switch (action.type) {

    case ADD_ERROR:
      return state.concat([action.error]);

    case REMOVE_ERROR:
      return state.filter((error, i) => i !== action.index);

    default:
      return state;
  }
}

Jawaban Erik benar tetapi saya ingin menambahkan bahwa Anda tidak perlu melakukan tindakan terpisah untuk menambahkan kesalahan. Pendekatan alternatif adalah memiliki peredam yang menangani tindakan apa pun dengan suatu errorbidang . Ini adalah masalah pilihan dan kesepakatan pribadi.

Misalnya dari contoh Reduxreal-world yang memiliki penanganan error:

// Updates error message to notify about the failed fetches.
function errorMessage(state = null, action) {
  const { type, error } = action

  if (type === ActionTypes.RESET_ERROR_MESSAGE) {
    return null
  } else if (error) {
    return error
  }

  return state
}

Pendekatan yang saat ini saya ambil untuk beberapa kesalahan spesifik (validasi input pengguna) adalah meminta sub-reduksi saya membuat pengecualian, menangkapnya di peredam root saya, dan melampirkannya ke objek tindakan. Lalu saya memiliki redux-saga yang memeriksa objek tindakan untuk kesalahan dan memperbarui pohon status dengan data kesalahan dalam kasus itu.

Begitu:

function rootReducer(state, action) {
  try {
    // sub-reducer(s)
    state = someOtherReducer(state,action);
  } catch (e) {
    action.error = e;
  }
  return state;
}

// and then in the saga, registered to take every action:
function *errorHandler(action) {
  if (action.error) {
     yield put(errorActionCreator(error));
  }
}

Dan kemudian menambahkan kesalahan ke pohon status seperti yang dijelaskan Erik.

Saya menggunakannya dengan hemat, tetapi itu membuat saya tidak harus menduplikasi logika yang secara sah termasuk dalam peredam (sehingga dapat melindungi dirinya sendiri dari keadaan tidak valid).

tulis Middleware khusus untuk menangani semua kesalahan terkait api. Dalam hal ini kode Anda akan lebih bersih.

   failure/ error actin type ACTION_ERROR

   export default  (state) => (next) => (action) => {

      if(ACTION_ERROR.contains('_ERROR')){

       // fire error action
        store.dispatch(serviceError());

       }
}

apa yang saya lakukan adalah saya memusatkan semua penanganan kesalahan yang berlaku pada setiap efek dasar

/**
 * central error handling
 */
@Effect({dispatch: false})
httpErrors$: Observable<any> = this.actions$
    .ofType(
        EHitCountsActions.HitCountsError
    ).map(payload => payload)
    .switchMap(error => {
        return of(confirm(`There was an error accessing the server: ${error}`));
    });

Anda dapat menggunakan klien HTTP axios. Ini sudah menerapkan fitur Interceptors. Anda bisa mencegat permintaan atau tanggapan sebelum ditangani saat itu atau menangkap.

https://github.com/mzabriskie/axios#interceptors

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });