React + redux какую структуру стейта выбрать для формы и компонента?

Question

[minority]

Делаю первый проект на react и появился вопрос как правильно, тк везде используются разные подходы.

Есть страницы (часть стейта у всех одинаковая) :
Авторизация
Регистрация
Восстановление пароля

Например для страницы регистрации я сделал такой глобальный стейт

const initialState = {
  isSuccess: false,
  isLoading: false,
  isError: false,
  errorMessage: ""
};

На сабмит формы вызывается экшен

export const signupRequest = formData => async dispatch => {
  try {
    dispatch(signupRequestProcess());

    const data = await api("post", "auth/signup", formData);

    dispatch(signupSuccess(data));
  } catch (error) {
    dispatch(signupRequestError(error));
  }
};

При этом я опустил onChange в компоненте формы, и стейт свойства для полей формы, потому что формы не большие и посчитал излишнем (возможно ошибаюсь), валидацию предоставляет ui библиотека .

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

Как будет выглядеть оптимальная структура и подход для таких форм?

Answer 1

[Robur]

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

Можно как у вас, можно положить стейт в компоненте, поменять флаг с true на false не так уж много логики.

Answer 2

[Дмитрий]

const initialState = {
  isLoading: false,
  errorMessage: ""
};

Этого достаточно, чтобы рассчитать isSuccess и isError

Comments

[Demian Smith]

С isError вроде понятно. А как отличить начальное состояние страницы от успешного окончания регистрации?

[Дмитрий]

Demian Smith, isLoading === false && errorMessage === ''

[Demian Smith]

Дмитрий, а чему errorMessage будет равен в начальном состоянии?