How to check each object in array in ReactJS + Redux?

Question

I have an object array of users, which each object has 'username' and 'password'.

There is then a login page, where once the user enters in a username and a password, I want to pass that into the reducer and compare them with each object in the 'users' array, and if an object that matches both, 'password' and 'username', is found, I want it return 'true'.

Following is the reducer:

const usersReducer = function(users = [], action){
  switch (action.type){

    case 'VERIFY_USER':
        return users.map((user)=> {
          if(user.username === action.username && user.password ===  action.password){
            return true
          } else{
          return false
          }
        })
      }

    default:
      return users
  }
}

But it seems to return true all the time. Am I using map correct? If not, is there such a method where it'll go through each object in an array? Any insight or guidance would be appreciated. Thank you in advance!

EDIT** Calling it from the following:

  verifyLoginUser(){
    event.preventDefault()

    if(this.props.actions.verifyUser(this.props.loginUser.username, this.props.loginUser.password)){
      console.log('LOGGED IN')
    } else {
      console.log('NOT LOGGED IN')
    }
  }

With the following reducer:

case 'VERIFY_USER':
  let isVerified = false;
  users.forEach((user)=> {
    if(user.username === action.username && user.password ===  action.password){
      isVerified = true;
      return false;
    }
  });
  return isVerified;

hopefully this is just something you're making for fun and not actually releasing, as storing+checking the passwords the way you're doing it is about as insecure as you can get — Hamms
– Hamms, Commented Jul 12, 2016 at 1:48
@Hamms not hooked up to a safe backend yet. this is just for testing and learning. appreciate the concern! — Jo Ko
– Jo Ko, Commented Jul 12, 2016 at 1:50
return users.find(user => user.username === action.username && user.password === action.password) — Hamms
– Hamms, Commented Jul 12, 2016 at 2:04

Chalk · Accepted Answer · 2016-07-12 02:00:59Z

1

Use Array.some

return users.some(user => user.username === action.username && user.password === action.password);

answered Jul 12, 2016 at 2:00

Chalk

665 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hamms Over a year ago

they want to actually retrieve the relevant user

Chalk Over a year ago

@Hamms He/she said I want it return 'true'., so this will be fine for him/her.

Arielle Nguyen · Accepted Answer · 2016-07-12 02:15:46Z

0

Map function would return you an array. I suggest using a different native array function: 'find'. To check if user object exists in the array of users, you can do

function findUser(user) { 
    return (user.username === action.username && user.password === action.password);
}

var isUser = users.find(findUser) ? true : false;
return isUser;

answered Jul 12, 2016 at 2:15

Arielle Nguyen

3,1721 gold badge22 silver badges16 bronze badges

Comments

John Ruddell · Accepted Answer · 2016-07-19 17:33:21Z

0

use a boolean variable and forEach to accomplish what you want

case 'VERIFY_USER':
    let isVerified = false;
    users.forEach((user)=> {
        if(user.username === action.username && user.password ===  action.password){
            isVerified = true;
            return false;
        } 
    });
    return isVerified;

to take this a step further lets say you wanted to iterate on this and return the correct user so that way you can populate a currentUser with it or something.

case 'VERIFY_USER':
    let currentUser = null;
    users.forEach((user)=> {
        if(user.username === action.username && user.password ===  action.password){
            currentUser = user;
            return false;
        } 
    });
    return currentUser;

EDIT: to what we were talking about in the comments

lets say you make a request to login a user somewhere. and the function lives on your props

this.props.loginUser({my params here});

now your actual action.

loginUser = (data) => {
    // whatever method you are using to make the request goes here.
    someRequestMethod('/login/, data).then( (response) => {
        if(response.status === 200){
            dispatch(type: USER_LOGIN, payload: response.data); // whatever the user is that comes back from the response. I just put data for an example
        }
    })
}

now in your reducer

const populateState = (user) => {
    return {
        id: user.id,
        username: user.username,
        email: user.email,
        isAuthenticated: Object.keys(user).length > 0
    };
}
let defaultState = {id: null, username: '', email: '', isAuthenticated: false};
const loginReducer = (currentUser = defaultState) => {
    switch (action.type){
        case 'USER_LOGIN':
            return Object.assign({}, currentUser, populateState(action.payload));
    return currentUser;
}

finally, everywhere else you just look for the current user.

if(this.props.currentUser.isAuthenticated){
    // do stuff
}

edited Jul 19, 2016 at 17:33

answered Jul 12, 2016 at 2:45

John Ruddell

25.9k7 gold badges60 silver badges88 bronze badges

14 Comments

Jo Ko Over a year ago

Sorry but why is it returning false inside the if-statement.

John Ruddell Over a year ago

@JoKo the return false is just to break the forEach loop. you are returning (to redux) isVerified which is set to true when you have a correct value. (the forEach defaults to returning true so that the next iteration of the for loop will happen. i'm breaking out of that loop because we already found the correct person).

Jo Ko Over a year ago

Appreciate the clarification but still don't seem to work as intended. Is it possible to open up a chat? Would really appreciate it. Been stuck on this since yesterday..

John Ruddell Over a year ago

Try printing out the user in each iteration of the forEach

John Ruddell Over a year ago

@JoKo also try printing out the action.username and password too.. I assume it may be a lowercase uppercase issue or something. where your comparison is not working properly

|

Collectives™ on Stack Overflow

How to check each object in array in ReactJS + Redux?

3 Answers 3

2 Comments

Comments

EDIT: to what we were talking about in the comments

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

EDIT: to what we were talking about in the comments

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related