Can't Update Store in Redux - reactjs

Question

Unable to figure out the issue as to why my store is not updating. My end goal is to have the "here is the store first name" and "here is the store last name" in the Component.js file display the first and last name of a data block I enter in the reducer (Joe and Smith respectively). Whenever I click the login button after entering proper credentials, the console logs "USERNAME AND PASS MATCH" which tells me that it recognizes that there is a match between what I'm supplying and what is in the data. But, it refuses to update the first_name and last_name of the store for some reason...
In my Component.js file:
import React from "react"
import { connect } from "react-redux"
import { setUsername, setPassword, handleLogin } from "../actions/userActions"
#connect((store) => {
return {
loginShow: store.loginShow,
loggedIn: store.loggedIn,
username: store.username,
password: store.password,
first_name: store.first_name,
last_name: store.last_name,
id: store.id,
invalidAttempt: store.invalidAttempt,
};
})
export default class Layout extends React.Component {
render() {
let loginView = null;
if (this.props.loginShow && this.props.invalidAttempt === false) {
loginView = (
<div className="loginBox">
<h3>Enter username and password</h3>
<input type="text" placeholder="Please enter username..."
onChange={(e) => this.props.dispatch(setUsername(e.target.value))} />
<br />
<input type="password" placeholder="Please enter password..."
onChange={(e) => this.props.dispatch(setPassword(e.target.value))} />
<p>Here is the store first name: {this.props.first_name}</p>
<p>Here is the store last name: {this.props.last_name}</p>
<br />
<button onClick={() => this.props.dispatch(handleLogin(this.props.username, this.props.password))}>Login</button>
</div>
)
}
return (
<div>
{loginView}
</div>
)
}
}
Here is the action file:
export function setUsername(name) {
return {
type: "SET_USERNAME",
payload: name,
}
}
export function setPassword(pword) {
return {
type: "SET_PASSWORD",
payload: pword,
}
}
export function handleLogin(uname, pword) {
return {
type: "HANDLE_LOGIN",
payload: {user: uname, pass: pword}
}
}
Now in my reducer file, I'm pretty sure this is where the issue is:
let data = [
{
"username": "imJoe",
"first_name": "Joe",
"last_name": "Smith",
"password": "password123",
"id": 1
}
]
export default function userReducer(state = {
loginShow: true,
loggedIn: false,
username: '',
password: '',
first_name: '',
last_name: '',
id: '',
invalidAttempt: false,
check: false,
}, action) {
switch (action.type) {
case "SET_USERNAME": {
console.log("SET USERNAME REUCER")
return { ...state, username: action.payload }
}
case "SET_PASSWORD": {
console.log("SET PASS REUCER")
return { ...state, password: action.payload }
}
case "HANDLE_LOGIN": {
console.log("HANDLE LOGIN REDUCER")
data.map(xyz => {
if (xyz.username === action.payload.user && xyz.password === action.payload.pass){
console.log("USERNAME AND PASS MATCH")
return {
...state,
first_name: xyz.first_name,
last_name: xyz.last_name,
}
}
})
}
}
return state
}

Answer 1

Your store not update because in your case "HANDLE LOGIN", you return nothing. From redux docs: reducer always should return new state, but you only map and return nothing.
Here is how "HANDLE_LOGIN" should look like:
case "HANDLE_LOGIN": {
console.log("HANDLE LOGIN REDUCER")
let firstName = null;
let lastName = null;
data.map(xyz => {
if (xyz.username === action.payload.user && xyz.password === action.payload.pass){
console.log("USERNAME AND PASS MATCH")
firstName = xyz.first_name;
lastName = xyz.last_name;
}
});
return {
...state,
first_name: firstName,
last_name: lastName,
}
}
So you reducer reеurns data, even data items is null your reducer returns items with null.