I'm building a Front End React JS app that consumes from a back-end API, and I currently working on a basic login form. I'm using Redux and React-Router 4
Here is how it currently works:
- User Fills out Login Form: User Inputs are stored as States on the LoginForm Component
- Upon Submission, a LoginUser Action is dispatched: LoginForm user input states are submitted to the LoginUser Action. This action is responsible for submitting an AJAX request to the server. Upon successful response, the Redux Store is updated with all the relevant user information
In theory, when my AJAX request successfully receive user information after authentication and then subsequently updates the redux store, the user should be redirected to their dashboard page. Ideally this code should live in my LoginUser Action as a callback to my AJAX request.
My question is this: How do I programmatically redirect the user to another route in my action file? Is there a way to do this with React-Redux 4?
EDIT So decided to keep the redirect state in my LoginForm component and create a function on the LoginForm component (redirectToDashboard())--this function would then be sent as a parameter to the fetchUser AJAX request that is sitting in my action file. I really feel like this is the best practice at the moment. Let me know if anyone else has other thoughts!
Special thanks to @alexander-borodin for giving me the guidance!