Проверка наличия пользователя в массиве пользователей

Question

Я пытаюсь создать систему входа пользователя с помощью React и Redux. Я использую данные макета следующим образом:

const users = [ 
{ 
    "id":1, 
    "username":"user1", 
    "email":"user@hotmail.com", 
    "password":"1527393" 
}, 
{ 
    "id":2, 
    "username":"user2", 
    "email":"user2@hotmail.com", 
    "password":"1527393" 
} 
]; 


export default users; 

Эти данные добавляются в магазин по умолчанию. Мой файл store.js выглядит следующим образом:

import {createStore, compose} from 'redux'; 
import rootReducer from '../reducers/index'; 

import userLoginReducer from '../data/users'; 

const defaultState = { 
    userLoginReducer 
}; 

export default function configureStore() { 
    return createStore(
     rootReducer, 
     defaultState, 
     compose(
      window.devToolsExtension ? window.devToolsExtension() : f => f //we use this line for chrome redux extension 
     ) 
    ); 
} 

для входа в системе компонентов, которые подключаются к Redux является:

import React from 'react'; 
import LoginForm from './loginForm'; 

import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 
import * as actionCreators from '../../actions/actionCreators'; 

class Login extends React.Component { 

    constructor(props, context) { 
     super(props, context); 

     this.state = { 
      loginData: { 
       username: '', 
       password: '' 
      }, 
      errors: {} 
     }; 

     this.buttonClickHandle = this.buttonClickHandle.bind(this); 
     this.loginHandle = this.loginHandle.bind(this); 
    } 

    loginHandle(event) { 
     let field = event.target.name; 
     let value = event.target.value; 

     let loginData = this.state.loginData; 
     loginData[field] = value; 

     this.setState({loginData: loginData}); 
    } 

    buttonClickHandle(event) { 
     event.preventDefault(); 
     this.props.actions.userLoginSuccess(this.state.loginData.username, this.state.loginData.password); 

     if (this.props.users.length > 0) { 
      console.log("User exists. Go to the login page"); 
     } else { 
      console.log("User doesn't exists. Show error message"); 
     } 
    } 

    render() { 
     const language = this.props.currentLanguage; 
     return (
      <div className="container"> 
       <div className="row"> 
        <p className="col-lg-4 col-xs-12 col-md-4 loginTitle noPadding">{language.loginTitle}</p> 
        <div className="col-lg-8 col-xs-12 col-md-8 loginForm noPadding"> 
         <LoginForm currentLanguage={language} onClick={this.buttonClickHandle} 
            onChange={this.loginHandle} errors={this.state.errors}/> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state, ownProps) { 
    return { 
     users: state.userLoginReducer 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
     actions: bindActionCreators(actionCreators, dispatch) 
    }; 
} 


export default connect(mapStateToProps, mapDispatchToProps)(Login); 

На странице загрузки я получаю эти два пользователя из файла данных. Ничего страшного.

В функции buttonClickHandle в компоненте входа я вызываю действие с именем пользователя и паролем, и я хочу проверить, пуст ли возвращенный массив из редуктора. Если он пуст, я бы обновил state.errors, и если он не пуст, я бы перенаправил его на страницу приветствия.

В редукторе я фильтрую данные и проверяю, существует ли пользователь с именем action.username, и я возвращаю этот массив в мой компонент входа.

Код редуктора следующим образом:

export default function userLoginReducer(state = [], action) { 
    switch(action.type){ 
     case "USER_LOGIN_SUCCESS": 
      return [...state.filter(user => user.username === action.username)]; 
     default: 
      return state; 
    } 
} 

Но это не работает.

Если я загружаю страницу, отправьте форму с именем пользователя user1, она работает, но она также работает, когда я отправляю ее, когда загружается страница, например user18.

Любые советы?

Answer 1

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

Вы

if (this.props.users.length > 0) { 
console.log("User exists. Go to the login page"); 
} else { 
console.log("User doesn't exists. Show error message"); 
} 

Но, предполагая, что вашу проверку против вашего users объекта, который содержит два объекта, this.props.users.length > 0 всегда будут возвращать true. Даже если вы проверяете пользователя, который не находится в users.

Вам необходимо добавить способ проверки фактического имени пользователя, с indexOf или includes или что-то в этом роде. Например, это будет работать:

const { users } = this.props; 

if (users.length > 0 && users.find(user => user.username === this.state.loginData.username)) { 
console.log("User exists. Go to the login page"); 
} else { 
console.log("User doesn't exists. Show error message"); 
}