2

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:

  1. User Fills out Login Form: User Inputs are stored as States on the LoginForm Component
  2. 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!

sunny
  • 150
  • 1
  • 10

2 Answers2

1

You can find a solution here

First of all, you should provide history to a context of your component:

static contextTypes = {
  router: React.PropTypes.shape({
    history: React.PropTypes.object.isRequired,
  })
};

Then push new location in success callback function

   export default YourComponent extends Component {
      ....
      successCallback() {
          this.context.router.history.push('/my-new-location')
      }
      ....
   }
Alex Borodin
  • 1,407
  • 9
  • 23
  • How would you implement the .push() in a Redux Action File? That is where my AJAX/Fetch call is currently stored – sunny Jul 31 '17 at 22:09
  • @sunny pass your callback function to the action as a parameter. Here is an action where success and error are parameters with callback function. (line 32) https://github.com/vacuumtubedriver/create-react-app-rails/blob/master/client/src/actions/index.js – Alex Borodin Jul 31 '17 at 22:13
  • That's an interesting approach, for some reason when I implement, my redux-logger crashes with the error: TypeError: Cannot read property 'type' of undefined – sunny Jul 31 '17 at 22:38
  • Actually nvm! I got it to work, thanks so much for giving the idea of sending the callback function as a paramater! – sunny Aug 01 '17 at 15:29
0

The cleanest way is for React router to run a callback after route changes. Sadly they don't have that feature. There are 2 libraries which can do that using middleware - Redux-Saga and Redux Observable. The idea to listen for a state change, in this case a location change in history, and run a function.

liangzan
  • 6,514
  • 3
  • 27
  • 28