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 Sails MVC app into React-Redux. Since it didn’t happen constantly, I figured it’s a race condition, and while debugging using Redux DevTools I noticed that
@@INIT action appears instead of the list of my predefined form actions.
A quick solution would be of course not to use this tag, or choose one of the available 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.
This is what I’ve found:
In one of React official documentation > Main concepts > Forms’ examples, the
onSubmit function is connected to the