Cách tốt nhất để giải quyết lỗi tìm nạp trong react redux là gì?

Tôi có một công cụ giảm bớt cho Khách hàng, một công cụ khác cho AppToolbar và một số công cụ khác ...

Bây giờ, hãy nói rằng tôi đã tạo một hành động tìm nạp để xóa ứng dụng khách và nếu nó không thành công, tôi có mã trong trình giảm bớt Khách hàng sẽ thực hiện một số công việc, nhưng tôi cũng muốn hiển thị một số lỗi chung trong Thanh AppToolbar.

Nhưng trình giảm bớt Khách hàng và Thanh công cụ ứng dụng không chia sẻ cùng một phần của trạng thái và tôi không thể tạo hành động mới trong trình giảm bớt.

Vì vậy, làm thế nào tôi giả sử để hiển thị lỗi toàn cầu? Cảm ơn

CẬP NHẬT 1:

Tôi quên đề cập rằng tôi sử dụng este devstack

CẬP NHẬT 2: Tôi đã đánh dấu câu trả lời của Eric là đúng, nhưng tôi phải nói rằng giải pháp mà tôi đang sử dụng trong este giống với sự kết hợp giữa câu trả lời của Eric và Dan hơn ... Bạn chỉ cần tìm những gì phù hợp với bạn nhất trong mã của bạn .. .

Nếu bạn muốn có khái niệm về "lỗi toàn cục", bạn có thể tạo một trình errorsgiảm thiểu, có thể lắng nghe các hành động addError, removeError, v.v. Sau đó, bạn có thể kết nối vào cây trạng thái Redux của mình tại state.errorsvà hiển thị chúng ở bất kỳ nơi nào thích hợp.

Có một số cách bạn có thể tiếp cận vấn đề này, nhưng ý tưởng chung là các lỗi / thông báo toàn cục sẽ có ích cho việc giảm thiểu của riêng chúng để hoàn toàn tách biệt với <Clients />/ <AppToolbar />. Tất nhiên nếu một trong hai thành phần này cần quyền truy cập, errorsbạn có thể chuyển errorscho chúng như một chỗ dựa bất cứ khi nào cần thiết.

Cập nhật: Ví dụ về mã

Dưới đây là một ví dụ về nó có thể trông như thế nào nếu bạn chuyển "lỗi chung" errorsvào cấp cao nhất của mình <App />và hiển thị nó có điều kiện (nếu có lỗi). Sử dụng react-reduxconnect để kết nối <App />thành phần của bạn với một số dữ liệu.

// 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);

Và theo như người tạo hành động có liên quan, nó sẽ gửi ( redux-thunk ) thất bại thành công theo phản hồi

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

Mặc dù trình giảm thiểu của bạn có thể đơn giản quản lý một loạt lỗi, thêm / bớt các mục nhập một cách thích hợp.

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

Câu trả lời của Erik là đúng nhưng tôi muốn nói thêm rằng bạn không cần phải thực hiện các hành động riêng biệt để thêm lỗi. Một cách tiếp cận khác là có một bộ giảm tốc xử lý bất kỳ hành động nào với một errortrường . Đây là vấn đề của sự lựa chọn và quy ước cá nhân.

Ví dụ: từ ví dụ Reduxreal-world có xử lý lỗi:

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

Cách tiếp cận mà tôi hiện đang thực hiện đối với một số lỗi cụ thể (xác thực đầu vào của người dùng) là yêu cầu các bộ giảm phụ của tôi ném một ngoại lệ, bắt nó trong bộ giảm gốc của tôi và gắn nó vào đối tượng hành động. Sau đó, tôi có một redux-saga kiểm tra các đối tượng hành động để tìm lỗi và cập nhật cây trạng thái với dữ liệu lỗi trong trường hợp đó.

Vì thế:

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

Và sau đó thêm lỗi vào cây trạng thái như Erik mô tả.

Tôi sử dụng nó khá ít, nhưng nó giúp tôi không phải lặp lại logic mà hợp pháp thuộc về trình giảm bớt (vì vậy nó có thể tự bảo vệ khỏi trạng thái không hợp lệ).

viết phần mềm trung gian tùy chỉnh để xử lý tất cả các lỗi liên quan đến api. Trong trường hợp này, mã của bạn sẽ sạch hơn.

   failure/ error actin type ACTION_ERROR

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

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

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

       }
}

những gì tôi làm là tôi tập trung tất cả việc xử lý lỗi trên cơ sở từng hiệu ứng

/**
 * 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}`));
    });

Bạn có thể sử dụng ứng dụng khách axios HTTP. Nó đã triển khai tính năng Đánh chặn. Bạn có thể chặn các yêu cầu hoặc phản hồi trước khi chúng được xử lý vào lúc đó hoặc bắt.

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