Skip to content

Commit

Permalink
Add another workaround for Flux circular deps issue
Browse files Browse the repository at this point in the history
  • Loading branch information
gaearon committed Feb 4, 2015
1 parent 4fabfc3 commit 5b37966
Showing 1 changed file with 62 additions and 1 deletion.
63 changes: 62 additions & 1 deletion docs/guides/flux.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ creating a cycle indirectly.

`router.js -> routes.js -> SomeComponent.js -> actions.js -> router.js`

To avoid this, you can do one of two things:
To avoid this, you can do one of three things:

1. Send the component to the action, think of it like `event.target` in
DOM events if it bothers you.
Expand Down Expand Up @@ -56,6 +56,67 @@ To avoid this, you can do one of two things:
}
```

3. Proxy calls to `router` instance and export the proxy early so action creators can `require` it.

```js
// router.js
// The trick is to assign module.exports before any require()s
var router;
module.exports = {
getCurrentPath() {
return router.getCurrentPath();
},
makePath(to, params, query) {
return router.makePath(to, params, query);
},
makeHref(to, params, query) {
return router.makeHref(to, params, query);
},
transitionTo(to, params, query) {
router.transitionTo(to, params, query);
},
replaceWith(to, params, query) {
router.replaceWith(to, params, query);
},
goBack() {
router.goBack();
},
run(render) {
router.run(render);
}
};
// By the time route config is require()-d,
// require('./router') already returns a valid object
var routes = require('./routes'),
Router = require('react-router');
router = Router.create({
routes: routes,
location: Router.HistoryLocation
});
```

and then in your `ActionCreators.js`

```js
var router = require('./router');
exports.doStuff = (payload) => {
// stuff
router.transitionTo(...);
}
```


Handling route changes as actions
---------------------------------

Expand Down

0 comments on commit 5b37966

Please sign in to comment.