Как сохранить неудачные попытки входа в React с использованием Redux?

Question

Приложение React создается с помощью входа в систему с настройками Google с использованием Firebase. Приложению необходимо отслеживать количество неудачных попыток входа в Redux, а если пользователь вводит неправильный пароль более двух раз, показывать компонент reCaptcha.

В данный момент компонент ReCaptcha загружается при каждой загрузке страницы. Он должен загружаться только тогда, когда пользователь вводит неверный пароль более 2 раз.

Страница входа:

render() {
  return (
     //Sign-in with Email component
     ....
     // ReCaptcha component
     ....
  );
}

Функция редуктора:

const initialState = {
  failedLoginAttempts: 0
};

export default (state = initialState, { type, payload }) => {
  switch (type) {
    case 'UPDATE_LOGIN_ATTEMPTS':
      return {
        ...state,
        failedLoginAttempts: //how to increment the count by 1??
      };
    default:
      return state;
  }
}

Answer 1

Вы можете сделать, увеличивая счетчик от предыдущего:

const initialState = {
  failedLoginAttempts: 0
};

export default (state = initialState, { type, payload }) => {
  switch (type) {
    case 'UPDATE_LOGIN_ATTEMPTS':
      return {
        ...state,
        failedLoginAttempts: state.failedLoginAttempts+1 //Update attempt from last one
      };
    default:
      return state;
  }
}

Answer 2

Вы не прикрепили файл Action.js, но, на мой взгляд, лучший способ прослушать что-либо в Redux, потерпевшее неудачу, - это {перехватить} действие -

---

export const Login = user => {
return (dispatch, getState) => {
    try {
        dispatch({
            type: 'LOGIN',
            payload: user 
        });
    } catch (err) {
        dispatch({
            type: 'LOGIN_ERR',
            err
          });
      }
  };
};

---

а затем в редуктор

---

const initialState = {
   attempts: 0 //in case that you want to increase the failed attempts only on second hit
   failedLoginAttempts: 0
  };

export default (state = initialState, { type, payload }) => {
   switch (type) {
     case 'LOGIN':
        return {
         ...state,
          //do something with the succseful user
       };
    case 'LOGIN_ERR':
       if (state.attempts === 1) {
       return {
        ...state,
        failedLoginAttempts: state.failedLoginAttempts + 1
        attempts: 0
       }
      } else { return { ...state, attempts: 1 } }
    default:
        return state;
    }
}

---

Answer 3

failedLoginAttempts: // как увеличить счет на 1 ??

Просто используйте текущее значение state.failedLoginAttempts и добавьте 1:

return {
  ...state,
  failedLoginAttempts: state.failedLoginAttempts + 1
};

Используйте mapStateToProps, чтобы отобразить failedLoginAttempts в качестве реквизита. Затем используйте его, чтобы показать капчу.

mapStateToProps(state) {
  return {
    failedLoginAttempts: state.failedLoginAttempts,
  }
}

render () {
  if (props.failedLoginAttempts > 2) {
    // show captcha
    return <Captcha />;
  }
}