Skip to content

Commit

Permalink
feat(docs): Document dynamic routes (react-boilerplate#804)
Browse files Browse the repository at this point in the history
  • Loading branch information
swordsreversed authored and mxstbr committed Jul 31, 2016
1 parent 2bcd3ae commit 71116a8
Showing 1 changed file with 74 additions and 0 deletions.
74 changes: 74 additions & 0 deletions docs/js/routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,4 +87,78 @@ For example, if you have a route called `about` at `/about` and want to make a c
}
```

## Dynamic routes

To go to a dynamic route such as 'post/:slug' eg 'post/cool-new-post', firstly add the route to your `routes.js`, as per documentation:

```
path: '/posts/:slug',
name: 'post',
getComponent(nextState, cb) {
const importModules = Promise.all([
System.import('containers/Post/reducer'),
System.import('containers/Post/sagas'),
System.import('containers/Post'),
]);
const renderRoute = loadModule(cb);
importModules.then(([reducer, sagas, component]) => {
injectReducer('post', reducer.default);
injectSagas(sagas.default);
renderRoute(component);
});
importModules.catch(errorLoading);
},
```

###Container:

```
<Link to={`/posts/${post.slug}`} key={post._id}>
```

Clickable link with payload (you could use push if needed).

###Action:

```
export function getPost(slug) {
return {
type: LOAD_POST,
slug,
};
}
export function postLoaded(post) {
return {
type: LOAD_POST_SUCCESS,
podcast,
};
}
```

###Saga:

```
const { slug } = yield take(LOAD_POST);
yield call(getXhrPodcast, slug);
export function* getXhrPodcast(slug) {
const requestURL = `http://your.api.com/api/posts/${slug}`;
const post = yield call(request, requestURL);
if (!post.err) {
yield put(postLoaded(post));
} else {
yield put(postLoadingError(post.err));
}
}
```

Wait (`take`) for the LOAD_POST constant, which contains the slug payload from the `getPost()` function in actions.js.

When the action is fired then dispatch the `getXhrPodcast()` function to get the reponse from your api. On success dispatch the `postLoaded()` action (`yield put`) which sends back the reponse and can be added into the reducer state.


You can read more on [`react-router`'s documentation](https://github.com/reactjs/react-router/blob/master/docs/API.md#props-3).

0 comments on commit 71116a8

Please sign in to comment.