Example using React Router

[andrewdavey]

Are there any examples of using Nuclear-js with React Router?

It seems like if I have routes such as order/:id then this has moved state out of Nuclear's store and into the route. Is this OK?

Another flow I'm confused about is:

1. Route /new-order displays a basic form page
2. Click "Save"
3. CREATE_ORDER action is dispatched
4. The store reacts to that action by adding a new order
5. UI should go to route order/:id, where :id is that of the new order.

Which code should have the responsibility of transitioning routes after order is created?

I guess in general this comes down to who's ultimately in charge, the router, or Nuclear? Any thoughts, pointers, blog posts, etc, you can share will be much appreciated.

By the way, I'm really liking the Nuclear approach to flux in general. So thanks for all the time you guys have put into it.

[jordangarcia]

Hey Andrew,

Really glad you are enjoying Nuclear! Unfortunately there isn't a React Router example currently. But I can give some suggestions based on our experience at Optimizely dealing with single page application routing.

Our basic setup is much like express where we have a list of routes and handler functions for each route.

let routes = [
  {  
    match: '/projects/:proj_id',
    handlers: [
      RoutingFns.fetchProjects,
      RoutingFns.fetchExperimentsData,
      RoutingFns.renderMainComponent('#body-wrapper', require('components/pages/dashboard'))
    ]
  }
  // ...
]

As you can see in the route handlers we do a lot of data fetching in the handlers, think of this as a controller layer in classic MVC. Data that is needed for the initial page render should be handled by the router. note: this doesn't mean that we block until all the data is fetched, in most cases we fire off requests for data, mount the main component and show loading indicators.

Back to your example

You are storing the newly created order in the NuclearJS app state and then want to navigate to a route where a component will look up the order by id (from Nuclear) and display the next step in the process.

Who's in charge? I'd say in general NuclearJS is never the system that is in charge. When used correctly it is a way to maintain state outside and between components.

Using React Router I would personally go with the following design pattern.

For reference this is the mixin that I am using: Navigation Mixin which is calling Navigation#transitionTo

import { Navigation } from 'react-router';
import actions from './actions'

React.createClass({

  mixins: [ Navigation ],

  _handleOrderCreate(orderInfo) {
    actions.createOrder(orderInfo)
    this.transitionTo('/order/' + orderInfo.id)
  },

  render() {
    // assume the CreateOrderForm component passes the created order object to `this.props.onCreate` function
    return <CreateOrderForm onCreate={this._handleOrderCreate} />
  }
});

So in this example the component is actually the one in charge. One goal of a well written frontend is reusability and that is IMO done best with composability. The ability for a high level part of the system (a component) to compose Nuclear actions and the Navigation mixin is very powerful since both parts stay decoupled and reusable.

Hope this is helpful!

[andrewdavey]

Thank you – very helpful. The "fire action, then transition" approach makes sense.

Regarding loading data from the store, I'm using a router handler that looks like this:

var OrderRouteHandler = React.createClass({
  mixins: [ reactor.ReactMixin ],

  getDataBindings() {
    return { orders: getters.ordersById };
  },

  render() {
    var id = this.props.params.id; // The id matched from the current route
    var order = this.state.orders.get(id);
    return <OrderDisplay order={order} />;
  }
});

So the routes look like:

var routes = (
  <Route handler={App}>
    <Route path="order/:id" handler={OrderRouteHandler} />
  </Route>
);

Does the use of a getter (ordersById) that returns the whole map of orders, and then in render getting the one I need seem like the right approach?

[jordangarcia]

Yeah that approach makes sense.

The other option is to use a function that creates a getter based on the
props in getDataBindings but I believe this won't work properly if the
component receives new props without being unmounted

On Tuesday, July 14, 2015, Andrew Davey notifications@github.com wrote:

Thank you – very helpful. The "fire action, then transition" approach
makes sense.

Regarding loading data from the store, I'm using a router handler that
looks like this:

var OrderRouteHandler = React.createClass({
mixins: [ reactor.ReactMixin ],

getDataBindings() {
return { orders: getters.ordersById };
},

render() {
var id = this.props.params.id; // The id matched from the current route
var order = this.state.orders.get(id);
return ;
}
});

So the routes look like:

var routes = (



);

Does the use of a getter (ordersById) that returns the whole map of
orders, and then in render getting the one I need seem like the right
approach?

—
Reply to this email directly or view it on GitHub
#122 (comment)
.

[andrewdavey]

That's what I discovered too :) So binding to the collection instead of a specific item was the next best option.

Thanks for all the suggestions and help.

[rattrayalex]

Using Getters with React-Router would be really terrific... my example is a "filter items" page, where a large number of query params may be determining what's displayed. I definitely don't want to bind to the whole collection there, as that means I lose the benefits of Nuclear in the most critical part of the page!

Would the solution there to be observe React Router events, send events to a "router" store, and use that in the getters?

EDIT: If so, perhaps that could be a 3rd-party package (nuclear-react-router)

[fabiosussetto]

@jordangarcia thanks for your example, but there you're assuming you already have the order id available straight after calling the action:

_handleOrderCreate(orderInfo) {
    actions.createOrder(orderInfo)
    this.transitionTo('/order/' + orderInfo.id)
  },

What if the order.id that you need to transition to is returned by an sync API fired up in the action?
Thanks!

[adamrneary]

If it helps, we ran into this problem but were able to handle it cleanly enough with promises:

mixins: [Flux.ReactMixin, Navigation, State],

contextTypes: {
  router: React.PropTypes.func
},

submitCreateForm() {
    TemplateMgmt.actions.submitCreateForm().then(template => {
      this.transitionTo('template-editor', {templateId: template.id},);
    });
}

render() {

  // other stuff

  <Button onClickHandler={this.submitCreateForm}>Create</Button>

}

To get this to work, the piece we were missing was the React Router State Mixin, but the above is working great for us without any added trickery.