title: Checking if an user exists in an array of users
body: <p>I'm trying to create a user login system with React and Redux. I use a mockup data as follows : </p>
  
  <pre><code>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;
  </code></pre>
  
  <p>This data is added to the store via default state. My store.js file is as follows : </p>
  
  <pre><code>    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 =&gt; f //we use this line for chrome redux extension
          )
      );
  }
  </code></pre>
  
  <p>My login components which is connected to redux is : </p>
  
  <pre><code>    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 &gt; 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 (
              &lt;div className="container"&gt;
                  &lt;div className="row"&gt;
                      &lt;p className="col-lg-4 col-xs-12 col-md-4 loginTitle noPadding"&gt;{language.loginTitle}&lt;/p&gt;
                      &lt;div className="col-lg-8 col-xs-12 col-md-8 loginForm noPadding"&gt;
                          &lt;LoginForm currentLanguage={language} onClick={this.buttonClickHandle}
                                     onChange={this.loginHandle} errors={this.state.errors}/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state, ownProps) {
      return {
          users: state.userLoginReducer
      };
  }
  
  function mapDispatchToProps(dispatch) {
      return {
          actions: bindActionCreators(actionCreators, dispatch)
      };
  }
  
  
  export default connect(mapStateToProps, mapDispatchToProps)(Login);
  </code></pre>
  
  <p>On a page load I get those two users from data file. That's ok. </p>
  
  <p>In the buttonClickHandle function in Login component I call an action with the username and password and I want to check if the returned array from the reducer is empty. If it is empty I would than update state.errors and if it's not empty I would that redirect to the welcome page.</p>
  
  <p>In the reducer I filter the data and check if the user with the action.username exists and I return that array to my Login component.</p>
  
  <p>The reducer code is as follows : </p>
  
  <pre><code>    export default function userLoginReducer(state = [], action) {
      switch(action.type){
          case "USER_LOGIN_SUCCESS":
              return [...state.filter(user =&gt; user.username === action.username)];
          default:
              return state;
      }
  }
  </code></pre>
  
  <p>But it doesn't work. </p>
  
  <p>If I when the page loads submit the form with username user1 it works, but it works also when I submit it when page loads with for example user18.</p>
  
  <p>Any advice?</p>