can i use action in Flux to control routes, HOW?

Question

I am writing a authentication module in Flux, actions : auth,auth_success,auth_error. I am thinking when action auth_error occur, the router will go to '/login'. When action, action, auth_success occur, the router will go to '/dashboard'. But it seems to be wrong because action only goes to dispatcher. I don't know how to do route the callbacks. Maybe check the store value?

Answer 1

You have to mixin your React class with Route.Navigation object, for instace

/** @jsx React.DOM */

var React = require('react');

var Router = require('react-router')
  , Navigation = Router.Navigation;

var UserStore = require('user-store');

var YourClass = module.exports = React.createClass({
  mixins:[Navigation], //This is very important

  getInitialState: function() {
    return {};
  },

  componentWillMount: function(){
    UserStore.addChangeListener(this._method);
  },
  componentWillUnmount: function(){
    UserStore.removeChangeListener(this._method);
  },

  render: function() {
    return (
      <div>
      </div>
    );
  },

  _method: function() {
    // From here you can call methods of Navigator Object
    this.transitionTo('SomeRouteName'); //This method will render the specified <Route>
  } 
});

For further information you can check https://github.com/rackt/react-router/blob/master/docs/api/mixins/Navigation.md

In order to change the route and according to flux architecture, you should call transitionTo from a callback of some User Store you should have.

I added an example to the code, you may customise it to your specific case.

Happy coding!