Example of a programmatic transition as a reaction to an event about flux-react-router-example

[gaearon]

Mostly it would follow the same flow:

1. In component: StuffActionCreators.post(something)
2. In action creator: StuffAPI.post(something)
3. In stuff API: ajax('POST', '/stuff/post', something, StuffServerActionCreators.handlePost)
4. In server action creator:

  handlePostStuff(err, response) {
    AppDispatcher.handleServerAction({
      type: err ? ActionTypes.POST_STUFF_ERROR : ActionTypes.POST_STUFF_SUCCESS,
      response: response,
      stuffId: err ? null : response.result
    });

    if (err) {
      console.error(err);
      // You might want to show error
      AlertActionCreators.showAlert(err.status ? AlertTypes.SERVER_ERROR : AlertTypes.CONNECTION_ERROR);
    } else {
      router.replaceWith('stuff', {
        stuffId: response.result
      });
    }
  }

Note that I'm assuming you're using Normalizr to flatten API responses, and thus POST /stuff is normalized into something like:

{
  result: 10, // stuff id
  entities: {
    stuffs: {
      10: {
        someStuffField: 'lala',
        otherStuffField: 42
      }
    }
    // if Stuff has any related nested entities, they will go here too
  }
}

This gives StuffStore the opportunity to consume posted stuff when POST_STUFF_SUCCESS is dispatched, similar to how content stores consume entities in this example.

Finallly, replaceWith (or transitionTo) is called on router instance. See flux howto in react-router.

[neverov]

Awesome!

Thanks a lot, that worked great!