Show errors received from my server with react-redux
0
If I perform all authentication requests to my API
not directly inside the "handleSubmit" function of react-redux but in a custom redux action, I have the problem of going to show any errors received by the server as a reply.
This is the authentication action (authActions.js):
export const loginUser = userData => dispatch => {
axios
.post("auth/local/signin")
.then(res => {
dispatch({
type: SET_CURRENT_USER,
payload: res
});
})
.catch(err => {
dispatch({
type: GET_ERRORS,
payload: err.response.data
});
});
};
authReducer.js
import { SET_CURRENT_USER } from "../actions/types";
const initialState = {
isAuthenticated: false,
user: {}
};
export default function(state = initialState, action) {
switch (action.type) {
case SET_CURRENT_USER:
return {
...state,
isAuthenticated: Object.keys(action.payload).length > 0,
user: action.payload
};
default:
return state;
}
}
errorReducer.js
import { GET_ERRORS, CLEAR_ERRORS } from "../actions/types";
const initialState = {};
export default function(state = initialState, action) {
switch (action.type) {
case GET_ERRORS:
return action.payload;
case CLEAR_ERRORS:
return {};
default:
return state;
}
}
The only thing that came to mind is then to connect to redux, as well as redux-form, the component and then go to report a possible error through "new SubmissionError (errors)". But this does not work on the first submit.
class SignInForm extends Component {
handleSubmit = values => {
const userData = {
username: values.username,
password: values.password
};
this.props.loginUser(userData);
const { errors } = this.props;
console.log(errors);
errors.username = errors.user;
if (errors) throw new SubmissionError(errors);
};
render() {
const { valid, handleSubmit, submitting } = this.props;
return (
<View>
...
</View>
);
}
}
const mapStateToProps = state => ({
auth: state.auth,
errors: state.errors
});
const form = reduxForm({
form: "Login",
validate,
asyncValidate,
asyncChangeFields: ["username"]
})(SignInForm);
export default connect(
mapStateToProps,
{ loginUser }
)(form);
reactjs react-native redux react-redux redux-form
asked Nov 23 '18 at 20:00
Niccolò caselliNiccolò caselli
967
add a comment |
0
If I perform all authentication requests to my API
not directly inside the "handleSubmit" function of react-redux but in a custom redux action, I have the problem of going to show any errors received by the server as a reply.
This is the authentication action (authActions.js):
export const loginUser = userData => dispatch => {
axios
.post("auth/local/signin")
.then(res => {
dispatch({
type: SET_CURRENT_USER,
payload: res
});
})
.catch(err => {
dispatch({
type: GET_ERRORS,
payload: err.response.data
});
});
};
authReducer.js
import { SET_CURRENT_USER } from "../actions/types";
const initialState = {
isAuthenticated: false,
user: {}
};
export default function(state = initialState, action) {
switch (action.type) {
case SET_CURRENT_USER:
return {
...state,
isAuthenticated: Object.keys(action.payload).length > 0,
user: action.payload
};
default:
return state;
}
}
errorReducer.js
import { GET_ERRORS, CLEAR_ERRORS } from "../actions/types";
const initialState = {};
export default function(state = initialState, action) {
switch (action.type) {
case GET_ERRORS:
return action.payload;
case CLEAR_ERRORS:
return {};
default:
return state;
}
}
The only thing that came to mind is then to connect to redux, as well as redux-form, the component and then go to report a possible error through "new SubmissionError (errors)". But this does not work on the first submit.
class SignInForm extends Component {
handleSubmit = values => {
const userData = {
username: values.username,
password: values.password
};
this.props.loginUser(userData);
const { errors } = this.props;
console.log(errors);
errors.username = errors.user;
if (errors) throw new SubmissionError(errors);
};
render() {
const { valid, handleSubmit, submitting } = this.props;
return (
<View>
...
</View>
);
}
}
const mapStateToProps = state => ({
auth: state.auth,
errors: state.errors
});
const form = reduxForm({
form: "Login",
validate,
asyncValidate,
asyncChangeFields: ["username"]
})(SignInForm);
export default connect(
mapStateToProps,
{ loginUser }
)(form);
reactjs react-native redux react-redux redux-form
asked Nov 23 '18 at 20:00
Niccolò caselliNiccolò caselli
967
add a comment |
0
0
0
If I perform all authentication requests to my API
not directly inside the "handleSubmit" function of react-redux but in a custom redux action, I have the problem of going to show any errors received by the server as a reply.
This is the authentication action (authActions.js):
export const loginUser = userData => dispatch => {
axios
.post("auth/local/signin")
.then(res => {
dispatch({
type: SET_CURRENT_USER,
payload: res
});
})
.catch(err => {
dispatch({
type: GET_ERRORS,
payload: err.response.data
});
});
};
authReducer.js
import { SET_CURRENT_USER } from "../actions/types";
const initialState = {
isAuthenticated: false,
user: {}
};
export default function(state = initialState, action) {
switch (action.type) {
case SET_CURRENT_USER:
return {
...state,
isAuthenticated: Object.keys(action.payload).length > 0,
user: action.payload
};
default:
return state;
}
}
errorReducer.js
import { GET_ERRORS, CLEAR_ERRORS } from "../actions/types";
const initialState = {};
export default function(state = initialState, action) {
switch (action.type) {
case GET_ERRORS:
return action.payload;
case CLEAR_ERRORS:
return {};
default:
return state;
}
}
The only thing that came to mind is then to connect to redux, as well as redux-form, the component and then go to report a possible error through "new SubmissionError (errors)". But this does not work on the first submit.
class SignInForm extends Component {
handleSubmit = values => {
const userData = {
username: values.username,
password: values.password
};
this.props.loginUser(userData);
const { errors } = this.props;
console.log(errors);
errors.username = errors.user;
if (errors) throw new SubmissionError(errors);
};
render() {
const { valid, handleSubmit, submitting } = this.props;
return (
<View>
...
</View>
);
}
}
const mapStateToProps = state => ({
auth: state.auth,
errors: state.errors
});
const form = reduxForm({
form: "Login",
validate,
asyncValidate,
asyncChangeFields: ["username"]
})(SignInForm);
export default connect(
mapStateToProps,
{ loginUser }
)(form);
reactjs react-native redux react-redux redux-form
asked Nov 23 '18 at 20:00
Niccolò caselliNiccolò caselli
967
If I perform all authentication requests to my API
not directly inside the "handleSubmit" function of react-redux but in a custom redux action, I have the problem of going to show any errors received by the server as a reply.
This is the authentication action (authActions.js):
export const loginUser = userData => dispatch => {
axios
.post("auth/local/signin")
.then(res => {
dispatch({
type: SET_CURRENT_USER,
payload: res
});
})
.catch(err => {
dispatch({
type: GET_ERRORS,
payload: err.response.data
});
});
};
authReducer.js
import { SET_CURRENT_USER } from "../actions/types";
const initialState = {
isAuthenticated: false,
user: {}
};
export default function(state = initialState, action) {
switch (action.type) {
case SET_CURRENT_USER:
return {
...state,
isAuthenticated: Object.keys(action.payload).length > 0,
user: action.payload
};
default:
return state;
}
}
errorReducer.js
import { GET_ERRORS, CLEAR_ERRORS } from "../actions/types";
const initialState = {};
export default function(state = initialState, action) {
switch (action.type) {
case GET_ERRORS:
return action.payload;
case CLEAR_ERRORS:
return {};
default:
return state;
}
}
The only thing that came to mind is then to connect to redux, as well as redux-form, the component and then go to report a possible error through "new SubmissionError (errors)". But this does not work on the first submit.
class SignInForm extends Component {
handleSubmit = values => {
const userData = {
username: values.username,
password: values.password
};
this.props.loginUser(userData);
const { errors } = this.props;
console.log(errors);
errors.username = errors.user;
if (errors) throw new SubmissionError(errors);
};
render() {
const { valid, handleSubmit, submitting } = this.props;
return (
<View>
...
</View>
);
}
}
const mapStateToProps = state => ({
auth: state.auth,
errors: state.errors
});
const form = reduxForm({
form: "Login",
validate,
asyncValidate,
asyncChangeFields: ["username"]
})(SignInForm);
export default connect(
mapStateToProps,
{ loginUser }
)(form);
reactjs react-native redux react-redux redux-form
reactjs react-native redux react-redux redux-form
asked Nov 23 '18 at 20:00
Niccolò caselliNiccolò caselli
967
asked Nov 23 '18 at 20:00
Niccolò caselliNiccolò caselli
967
asked Nov 23 '18 at 20:00
Niccolò caselliNiccolò caselli
967
asked Nov 23 '18 at 20:00
Niccolò caselliNiccolò caselli
967
asked Nov 23 '18 at 20:00
Niccolò caselliNiccolò caselli
967
967
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
You could use Promises to pass the result back to the signin component. Now that you're in the signin component you can show the error to the user, if it failed.
authActions.js
export const loginUser = userData => dispatch => {
return new Promise((resolve, reject) => {
axios
.post("auth/local/signin")
.then(res => {
dispatch({
type: SET_CURRENT_USER,
payload: res
});
return resolve();
})
.catch(err => {
return reject(err);
});
});
}
signin.js (?)
handleSubmit = values => {
const userData = {
username: values.username,
password: values.password
};
this.props.loginUser(userData)
.catch((err) => {
this.setState({ errorMsg: err });
});
};
render() {
const { valid, handleSubmit, submitting } = this.props;
return (
<View>
...
<div>Failed to login with error message: {this.state.errorMsg}</div>
</View>
);
}
answered Nov 24 '18 at 1:32
Shawn AndrewsShawn Andrews
945617
Hello! @Shawn Andrews I think it's a very elegant solution, but I also think that it does not integrate well with react-redux. Because for example when I have to go to generate a validation error with the SubmissionError class I have to do it within the catch block, but this leads to an "unhandled promise" error.throw new SubmissionError(errors);
– Niccolò caselli
Nov 24 '18 at 21:18
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452348%2fshow-errors-received-from-my-server-with-react-redux%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You could use Promises to pass the result back to the signin component. Now that you're in the signin component you can show the error to the user, if it failed.
authActions.js
export const loginUser = userData => dispatch => {
return new Promise((resolve, reject) => {
axios
.post("auth/local/signin")
.then(res => {
dispatch({
type: SET_CURRENT_USER,
payload: res
});
return resolve();
})
.catch(err => {
return reject(err);
});
});
}
signin.js (?)
handleSubmit = values => {
const userData = {
username: values.username,
password: values.password
};
this.props.loginUser(userData)
.catch((err) => {
this.setState({ errorMsg: err });
});
};
render() {
const { valid, handleSubmit, submitting } = this.props;
return (
<View>
...
<div>Failed to login with error message: {this.state.errorMsg}</div>
</View>
);
}
answered Nov 24 '18 at 1:32
Shawn AndrewsShawn Andrews
945617
Hello! @Shawn Andrews I think it's a very elegant solution, but I also think that it does not integrate well with react-redux. Because for example when I have to go to generate a validation error with the SubmissionError class I have to do it within the catch block, but this leads to an "unhandled promise" error.throw new SubmissionError(errors);
– Niccolò caselli
Nov 24 '18 at 21:18
add a comment |
1
You could use Promises to pass the result back to the signin component. Now that you're in the signin component you can show the error to the user, if it failed.
authActions.js
export const loginUser = userData => dispatch => {
return new Promise((resolve, reject) => {
axios
.post("auth/local/signin")
.then(res => {
dispatch({
type: SET_CURRENT_USER,
payload: res
});
return resolve();
})
.catch(err => {
return reject(err);
});
});
}
signin.js (?)
handleSubmit = values => {
const userData = {
username: values.username,
password: values.password
};
this.props.loginUser(userData)
.catch((err) => {
this.setState({ errorMsg: err });
});
};
render() {
const { valid, handleSubmit, submitting } = this.props;
return (
<View>
...
<div>Failed to login with error message: {this.state.errorMsg}</div>
</View>
);
}
answered Nov 24 '18 at 1:32
Shawn AndrewsShawn Andrews
945617
Hello! @Shawn Andrews I think it's a very elegant solution, but I also think that it does not integrate well with react-redux. Because for example when I have to go to generate a validation error with the SubmissionError class I have to do it within the catch block, but this leads to an "unhandled promise" error.throw new SubmissionError(errors);
– Niccolò caselli
Nov 24 '18 at 21:18
add a comment |
1
1
1
You could use Promises to pass the result back to the signin component. Now that you're in the signin component you can show the error to the user, if it failed.
authActions.js
export const loginUser = userData => dispatch => {
return new Promise((resolve, reject) => {
axios
.post("auth/local/signin")
.then(res => {
dispatch({
type: SET_CURRENT_USER,
payload: res
});
return resolve();
})
.catch(err => {
return reject(err);
});
});
}
signin.js (?)
handleSubmit = values => {
const userData = {
username: values.username,
password: values.password
};
this.props.loginUser(userData)
.catch((err) => {
this.setState({ errorMsg: err });
});
};
render() {
const { valid, handleSubmit, submitting } = this.props;
return (
<View>
...
<div>Failed to login with error message: {this.state.errorMsg}</div>
</View>
);
}
answered Nov 24 '18 at 1:32
Shawn AndrewsShawn Andrews
945617
You could use Promises to pass the result back to the signin component. Now that you're in the signin component you can show the error to the user, if it failed.
authActions.js
export const loginUser = userData => dispatch => {
return new Promise((resolve, reject) => {
axios
.post("auth/local/signin")
.then(res => {
dispatch({
type: SET_CURRENT_USER,
payload: res
});
return resolve();
})
.catch(err => {
return reject(err);
});
});
}
signin.js (?)
handleSubmit = values => {
const userData = {
username: values.username,
password: values.password
};
this.props.loginUser(userData)
.catch((err) => {
this.setState({ errorMsg: err });
});
};
render() {
const { valid, handleSubmit, submitting } = this.props;
return (
<View>
...
<div>Failed to login with error message: {this.state.errorMsg}</div>
</View>
);
}
answered Nov 24 '18 at 1:32
Shawn AndrewsShawn Andrews
945617
answered Nov 24 '18 at 1:32
Shawn AndrewsShawn Andrews
945617
answered Nov 24 '18 at 1:32
Shawn AndrewsShawn Andrews
945617
answered Nov 24 '18 at 1:32
Shawn AndrewsShawn Andrews
945617
945617
Hello! @Shawn Andrews I think it's a very elegant solution, but I also think that it does not integrate well with react-redux. Because for example when I have to go to generate a validation error with the SubmissionError class I have to do it within the catch block, but this leads to an "unhandled promise" error.throw new SubmissionError(errors);
– Niccolò caselli
Nov 24 '18 at 21:18
add a comment |
Hello! @Shawn Andrews I think it's a very elegant solution, but I also think that it does not integrate well with react-redux. Because for example when I have to go to generate a validation error with the SubmissionError class I have to do it within the catch block, but this leads to an "unhandled promise" error.throw new SubmissionError(errors);
– Niccolò caselli
Nov 24 '18 at 21:18
Hello! @Shawn Andrews I think it's a very elegant solution, but I also think that it does not integrate well with react-redux. Because for example when I have to go to generate a validation error with the SubmissionError class I have to do it within the catch block, but this leads to an "unhandled promise" error.
throw new SubmissionError(errors);– Niccolò caselli
Nov 24 '18 at 21:18
Hello! @Shawn Andrews I think it's a very elegant solution, but I also think that it does not integrate well with react-redux. Because for example when I have to go to generate a validation error with the SubmissionError class I have to do it within the catch block, but this leads to an "unhandled promise" error.
throw new SubmissionError(errors);– Niccolò caselli
Nov 24 '18 at 21:18
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452348%2fshow-errors-received-from-my-server-with-react-redux%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
