Redux - как отключить кнопку отправки перед отображением страницы?

Question

Я новичок в избыточности, у меня есть форма с кнопкой отправки, и я хочу при определенных условиях отключить кнопку при отображении формы для пользователя.У меня есть два действия, которые я вызвал в конструктор моего компонента, как показано ниже. INIT_FORM для предварительного заполнения пользовательских данных и DISABLE_BUTTON для отключения кнопки.Я заметил, что моя форма заполняется перед отображением для пользователя, но отключение кнопки отправки заняло некоторое время, что не очень удобно для пользователя.disableButtonAction вызывается после отображения формы, несмотря на то, что я вызываю ее в конструкторе компонента.Это часть моего кода:

class editUser extends React.Component {
  constructor(props) {
    super(props);

    props.inititForm(props.userInfo);
    props.disableChange();
    ...

  switch (action.type) {
    case INIT_FORM: {
      ...
    }
    case DISABLE_BUTTON: {
      return { ...state, isButtonDisabled: action.payload };
    }
    default:
      return state;
  }
  ...

const mapDispatchToProps = dispatch => ({
  inititForm: companyInfo => dispatch(initFormAction(companyInfo)),
  disableButton: () => dispatch((disableButtonAction())),
...
  ),

   <Suspense fallback=...>
              <Switch>
                <Route exact path={routes.EDIT_USER} component={EditUserContainer} />
              </Switch>
   </Suspense>

Answer 1

Вам не нужно использовать action.payload в DISABLE_BUTTON. Чтобы отключить его, вы можете просто установить его в значение true.

1. будет отключена, так как ваша форма отображается на экране. (в качестве исходного состояния)
2. кнопка будет отключена при каждом вызове disableButtonAction

switch (action.type) {
    case INIT_FORM: {
        return { ...state, isButtonDisabled: true }; <-- 1
    }
    case DISABLE_BUTTON: {
        return { ...state, isButtonDisabled: action.payload }; <-- 2
    }
    default:
        return state;
}
...