Який найкращий спосіб впоратися з помилкою вибору в реакції редукції?

У мене є один редуктор для клієнтів, ще один для AppToolbar та деякі інші ...

Тепер давайте скажемо, що я створив дію для вилучення клієнта, і якщо він не вдається, у мене є код у редукторі клієнтів, який повинен робити деякі речі, але також я хочу показати деяку глобальну помилку в панелі AppTool.

Але Клієнти та редуктори панелі AppTool не поділяють однакову частину стану, і я не можу створити нову дію в редукторі.

Тож як я можу показати глобальну помилку? Дякую

ОНОВЛЕННЯ 1:

Забуваю згадати, що я використовую este devstack

ОНОВЛЕННЯ 2: Я позначив відповідь Еріка як правильну, але я мушу сказати, що рішення, яке я використовую, більше нагадує поєднання відповіді Еріка та Дена ... Вам просто потрібно знайти те, що найкраще відповідає вашому коду .. .

Якщо ви хочете мати поняття "глобальні помилки", ви можете створити errorsредуктор, який може прослуховувати дії addError, removeError тощо .... Потім ви можете підключити до свого дерева стану Redux у state.errorsта показати їх, де це доречно.

Ви можете підійти до цього декількома способами, але загальна ідея полягає в тому, що глобальні помилки / повідомлення заслуговують на те, щоб їх власний редуктор жив повністю окремо від <Clients />/ <AppToolbar />. Звичайно, якщо будь-який з цих компонентів потребує доступу до errorsвас, ви можете перейти errorsдо них як опора, куди потрібно.

Оновлення: Приклад коду

Ось один приклад того, як це могло б виглядати, якби ви передавали «глобальні помилки» errorsна свій найвищий рівень <App />і умовно їх рендерували (якщо є помилки). Використання react-redux'sconnect для підключення вашого <App />компонента до деяких даних.

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

І наскільки творець дії, то воно буде відправляти ( перевождь-перетворювач ) відмова успіху в відповідно до відповіддю

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

Тоді як ваш редуктор може просто керувати масивом помилок, додаючи / видаляючи записи відповідним чином.

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

Відповідь Еріка правильна, але я хотів би додати, що вам не потрібно вводити окремі дії для додавання помилок. Альтернативний підхід - мати редуктор, який обробляє будь-які дії з errorполем . Це питання особистого вибору та умовності.

Наприклад, з прикладу Redux,real-world який має обробку помилок:

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

Підхід, який я зараз приймаю за декілька конкретних помилок (перевірка введення користувачем), полягає в тому, щоб мої субредуктори відкидали виняток, зафіксували його в моєму кореневому редукторі та додали його до об'єкта дії. Тоді у мене є редукс-сага, яка перевіряє об’єкти дій на предмет помилки та оновлює дерево стану з даними про помилки в цьому випадку.

Так:

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

А потім додавання помилки до дерева стану відбувається так, як описує Ерік.

Я використовую його досить щадно, але це не дає мені дублювати логіку, яка легітимно належить до редуктора (щоб він міг захистити себе від недійсного стану).

написати спеціальне середнє програмне забезпечення для обробки всіх помилок, пов’язаних з api. У цьому випадку ваш код стане більш чистим.

   failure/ error actin type ACTION_ERROR

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

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

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

       }
}

те, що я роблю, - це централізувати всі поводження з помилками в результаті на основі ефекту

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

Ви можете використовувати axios HTTP-клієнт. У ньому вже є реалізована функція перехоплювачів. Ви можете перехоплювати запити або відповіді, перш ніж вони потім будуть оброблені, або зловити.

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