react-router-fetch-data
v1.1.0
Published
Fetch data router for React-Router v4
Downloads
12
Maintainers
Readme
react-router-fetch-data
Fetch data router for React-Router v4
- Fetch data in correct order from API
- Using standard "matchPattern" from "react-router"
- Declarative
- Only Server Side
##Fetch data router:
import { fetchDataRouter, Match } from 'react-router-fetch-data';
const resolveFetchData = fetchDataRouter(
<Match pattern = '/' on = {actionCreators.fetchUser}/>,
<Match pattern = '/' on = {actionCreators.fetchForAll}/>,
<Match pattern = '/app/' on = {actionCreators.fetchApp} exactly = {true}/>,
<Match pattern = '/app/config' on = {actionCreators.fetchAppConfig}/>,
<Match pattern = '/app/config/1' on = {actionCreators.fetchAppConfig1}/>,
<Match pattern = '/app/:id' on = {actionCreators.fetchForAllInApp}/>,
<Match pattern = '/app/test' on = {actionCreators.fetchAppTest}/>,
<Match pattern = '/about' on = {actionCreators.fetchAbout}/>,
);
or
const resolveFetchData = fetchDataRouter(
{pattern: '/', onMatch: actionCreators.fetchUser },
{pattern: '/', onMatch: actionCreators.fetchForAll },
{pattern: '/app/', onMatch: actionCreators.fetchApp, exactly: true},
{pattern: '/app/config', onMatch: actionCreators.fetchAppConfig },
{pattern: '/app/config/1', onMatch: actionCreators.fetchAppConfig1 },
{pattern: '/app/:id', onMatch: actionCreators.fetchForAllInApp },
{pattern: '/app/test', onMatch: actionCreators.fetchAppTest },
{pattern: '/about', onMatch: actionCreators.fetchAbout }
);
##Resolve fetch data -> Render
function handler(req, res) {
//...
resolveFetchData(req.url).then((errors) => {
//fetch-data errors/rejects
if(errors.length > 0) {
console.warn(...errors);
}
const markup = ReactDOMServer.renderToStaticMarkup(
<App/>
);
res.end(markup);
});
}
##Function signature Match.on
fetchExampleData({ params: Object, isExact: Boolean, pathname: String }) {
//..
return promise;
}