Redux display error messages from Nodejs backend - node.js

Question

I want to display the error messages I am receiving from my backend in an alert, whenever my login failes:
My login-button triggers this function from my user.actions:
function login(username, password) {
return dispatch => {
dispatch(request({ username }));
userService.login(username, password)
.then(
user => {
dispatch(success(user));
history.goBack();
},
error => {
dispatch(failure(error.toString()));
dispatch(alertActions.error(error.toString()));
}
);
};
function request(user) { return { type: userConstants.LOGIN_REQUEST, user } }
function success(user) { return { type: userConstants.LOGIN_SUCCESS, user } }
function failure(error) { return { type: userConstants.LOGIN_FAILURE, error } }
}
My alert.reducer looks as following:
import { alertConstants } from '../_constants';
export function alert(state = {}, action) {
switch (action.type) {
case alertConstants.SUCCESS:
return {
type: 'alert-success',
message: action.message
};
case alertConstants.ERROR:
return {
type: 'alert-danger',
message: action.message
};
case alertConstants.CLEAR:
return {};
default:
return state
}
}
In my App.js I receive this state with mapStateToProps:
function mapStateToProps(state) {
const { alert } = state;
return {
alert
};
}
After that, I want to display an alert with the alert message:
{alert.message &&
alert(alert.message)
}
Can you help me with that?

Answer 1

your action/reducer code looks ok, I think maybe it is a conflict with the props name and the native alert function.
Have you tried to change the props names? Something like:
function mapStateToProps(state) {
const { alert } = state;
return {
alertState: alert
};
}
and
{ alertState.message && alert(alertState.message) }