React useEffect not triggered - reactjs

Question

My useEffect code looks like this:
useEffect(() => {
if (user) {
setBalance(user.user_balance);
console.log("user.user_balance");
console.log(user.user_balance);
}
}, [user]);
Full code : https://pastebin.com/CP6sLNQZ
The useEffect is supposed to get triggered every time user (user_balance) gets updated in the database but it is not getting triggered. User is a props and it is passed from redux to the component.
The action for updating the balance is here:
import axios from "axios";
import { returnErrors } from "./errorActions";
import { UPDATE_BALANCE_SUCCESS } from "./types";
//update balance
export const updateBalance = ({ email, user_balance }) => (dispatch) => {
// Headers
const config = {
headers: {
"Content-Type": "application/json",
},
};
// Request body
const body = JSON.stringify({ email, user_balance });
axios
.post("/api/users/updatebalance", body, config)
.then((res) =>
dispatch({
type: UPDATE_BALANCE_SUCCESS,
payload: { email, user_balance },
})
)
.catch((err) =>
dispatch(returnErrors(err.response.data, err.response.status))
);
};
The reducer:
import { UPDATE_BALANCE_SUCCESS } from "../actions/types";
const initalState = {
email: null,
user_balance: null,
};
export default function (state = initialState, action) {
switch (action.type) {
case UPDATE_BALANCE_SUCCESS:
return {
...state,
email: action.payload.email,
user_balance: action.payload.user_balance,
};
}
}
And the end-point:
// #route POST api/users/updatebalance
// #description Update user balance
// #access Public
router.post("/updatebalance", (req, res) => {
const { email, user_balance } = req.body;
User.findOneAndUpdate(
{ email },
{ $inc: { user_balance: user_balance } },
function (err, result) {
if (err) {
res.send(err);
} else {
res.send(result);
}
}
);
});
Also where auth comes from:
This is the auth reducer: https://pastebin.com/upHdvtiF
These are the actions: https://pastebin.com/Ajp7S1Yi
And this is the end point: https://pastebin.com/NwCHCitY
I got a log in and register page and once a user gets registered auth gets created. In the actions link you can see the login and register action.

Answer 1

I think you have to add the user layer
const initalState = {
user: {
email: null,
user_balance: null,
}
};
and the reducer
export default function (state = initialState, action) {
switch (action.type) {
case UPDATE_BALANCE_SUCCESS:
return {
...state,
user: {
...state.user,
email: action.payload.email,
user_balance: action.payload.user_balance,
}
};
}
}