Как координировать сообщения об ошибках сервера между Flux и React?

Я изучаю React и Flux за последние несколько месяцев, и еще одна вещь, о которой я еще не говорил, - это отображение сообщений об ошибках пользователям. В частности, сообщения об ошибках, возникающие в результате HTTP-запроса ajax в методе создания действия потока.

Простым примером является вход пользователя в систему - если знак в ajax-запросе терпит неудачу из-за плохого пароля, сервер отвечает сбоем. В этот момент, в моем методе создания действия потока, мой единственный вариант - отправить действие, содержащее информацию об ошибке, правильно?

Я могу отправить информацию об ошибке и сохранить эту ошибку в магазине. Я не уверен, что лучший способ связать определенные ошибки с некоторыми компонентами. Допустим, что мое дерево реагирующих компонентов отображает несколько компонентов, совместимых с ошибками, но возникает ошибка во время попытки аутентификации на стороне сервера и должна отображаться в форме этого знака.

Есть ли хороший шаблон или соглашение для хранения ошибок и зная, для какого компонента они предназначены? Есть ли программный способ определения этого, вместо того, чтобы передавать в каком-то идентификаторе каждую функцию-создателя действия, которая идентифицирует компонент, созданный создателем действия и т.д.?

Ответ 1

Поскольку вы отметили вопрос с тегом Redux, я предполагаю, что вы используете Redux.
Если это так, этот пример в реальном мире показывает обработку ошибок.

Там есть редуктор, который реагирует на любое действие с полем 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 action.error;
  }

  return state;
}

Пользовательское промежуточное ПО API помещает любое сообщение об ошибке в поле error в действии:

  return callApi(endpoint, schema).then(
    response => next(actionWith({
      response,
      type: successType
    })),
    error => next(actionWith({
      type: failureType,
      error: error.message || 'Something bad happened'
    }))
  );

Наконец, компонент читает сообщение об ошибке из магазина Redux:

function mapStateToProps(state) {
  return {
    errorMessage: state.errorMessage
  };
}

Как вы можете видеть, это не отличается от того, как вы будете обрабатывать отображаемые данные.

Ответ 2

Ваша идея хранить информацию об ошибках в магазине в порядке (вероятно, ErrorStore). Но в магазине нет необходимости знать компонент, интересующийся конкретной ошибкой. Вместо этого ErrorStore должен выдать событие CHANGE. При испускании этого события вы можете добавить дополнительный аргумент, а именно тип ошибки (который, предположительно, из хранилища предположительно получает от создателя действия).

Теперь любой компонент может прослушать ErrorStore и проверить тип ошибки (который он получит в качестве аргумента). Затем компоненты могут знать, какая ошибка была сгенерирована, и решить, заинтересованы ли они в этом или нет.