Imagine a form inside a React-Redux application. Every time the user fills one of the fields in the form, Redux state is changed. Submit button sends HTTP POST request to the server and redirects to the next screen. Unfortunately, occasionally the submit button causes the application to go back to the login page, instead. This is the situation I’ve encountered while transforming a MVC app into React-Redux. Since it didn’t happen constantly, I figured it’s a race condition, and while debugging using I noticed that action appears instead of the list of my predefined form actions. Sails Redux DevTools @@INIT would be of course not to use this tag, or choose one of the form libraries. While I was able to handle the cons of these solutions, such as needing to implement the validations in case of just removing the tag, or needing to embed a new external library in the project had I chosen to use an existing library, I wanted to dig deep and understand why it happens. A quick solution available This is what I’ve found: In one of ’ examples, the function is connected to the tag, this way: React official documentation > Main concepts > Forms onSubmit <form> <form onSubmit={this.handleSubmit}> and inside it the default behavior is prevented: handleSubmit(e) { e.preventDefault(); } But what is the default behavior that is prevented, why does it cause the state to reset, and why only sometimes? It worked. The answer was unexpectedly in the tab of the DevTools. When clicking on the submit didn’t result with the expected behavior, the HTTP POST request was cancelled (appears in the network tab in red), and instead a GET request was sent with the form data in the URL. network This is how works from before the days of Ajax. On submit, an http call is invoked, by default — it’s GET. When this happened before the HTTP call, it caused the cancellation of the Axios call, and the server responded in a way that caused the app to reset. When the Axios call happened first — the app worked as expected. <form> Axios One of the main things that I’ve learned from this bug is that knowledge from ages ago can be useful in todays development.
