Simple integration of redial for React Router
$ npm install --save react-router-redial redialData fetching is an important part of applications and redial is a great way to manage this in React when using React Router. This project aims to provide a great way to use redial together with React Router with a simple but yet powerful API.
Additionally it offers an alternative way to manage data for components without the need of flux. This means that you can start creating an application without for instance Redux and when you see the need for it you can easily update your application gradually.
react-router-redial has been inspired by AsyncProps and can be seen as an alternative to it.
Works with universal applications that run on the server and the client as well as client only applications.
Works with IE9 if a Promise polyfill is provided.
- Simple integration with React Router
- Managing client side data loading with route transition support
- Powerful API to control hooks on both client and server
- Alternative way to pass data to components without the need of Redux
- Uses redial hooks to manage data loading
- Possible to easily transition to Flux/Redux
You use @provideHooks as would normally when using redial. One difference is that react-router-redial will provide some default locals to the hooks.
import { provideHooks } from 'redial';
import React, { Component } from 'react';
import { getSomething } from 'actions/things';
@provideHooks({
fetch: ({ dispatch, params: { id } }) => dispatch(getSomething(id)),
defer: ({ setProps, getProps, force }) => {
const { data } = getProps();
if(!data || force) {
// Will be available as this.props.data on the component
setProps({ data: 'My important data' })
}
}
})
class MyRouteHandler extends Component {
render() {
return <div>{ this.props.data }</div>;
}
}setProps Makes it possible to set things that should be available to the component as props, should be an object
getProps Makes it possible to get things that has been defined for the component, can be used for bailout
force If the provideHooks has been invoked using the reload function
params Route params from React Router
location Location object from React Router
routeProps Custom defined properties that has been defined on the route components
isAborted Function that returns if the hooks has been aborted, can be used to ignore the result
loading Will be true when beforeTransition hooks are not yet completed
afterTransitionLoading Will be true when afterTransition hooks are not yet completed
reload Function that can be invoked to re-trigger the hooks for the current component
abort Function that can be invoked to abort current running hooks
Additionally components will have access to properties that has been set using setProps.
The custom redial router middleware useRedial makes it easy to add support for redial on the client side using the render property from Router in React Router. It provides the following properties as a way to configure how the data loading should behave.
locals Extra locals that should be provided to the hooks other than the default ones
beforeTransition Hooks that should be completed before a route transition is completed
afterTransition Hooks that are not needed before making a route transition
parallel If set to true the afterTransition hooks will run in parallel with the beforeTransition ones
initialLoading Component should be shown on initial client load, useful if server rendering is not used
onStarted(force) Invoked when a route transition has been detected and when redial hooks will be invoked
onError(error, metaData) Invoked when an error happens, see below for more info
onAborted(becauseError) Invoked if it was prematurely aborted through manual interaction or an error
onCompleted(type) Invoked if everything was completed successfully, with type being either "beforeTransition" or "afterTransition"
metaData
abort() Function that can be used to abort current loading
beforeTransition If the error originated from a beforeTransition hook or not
reason The reason for the error, can be either a "location-changed", "aborted" or "other"
router React Router instance https://github.com/ReactTraining/react-router/blob/master/docs/API.md#contextrouter
We can use onError to add handling for errors in our application. The example below shows how we can make the client either reload the page or transition back to the previous page on an error.
const forcePageReloadOnError = true;
const goBackOnError = false;
// Function that can be used as a setting for useRedial
function onError(err, { abort, beforeTransition, reason, router }) {
if (process.env.NODE_ENV !== 'production') {
console.error(reason, err);
}
// We only what to do this if it was a beforeTransition hook that failed
if (beforeTransition) {
if (forcePageReloadOnError && reason === 'other') {
window.location.reload();
} else if (goBackOnError && reason !== 'location-changed') {
router.goBack();
}
// Abort current loading automatically
abort();
}
}import { useRedial } from 'react-router-redial';
import { applyRouterMiddleware } from 'react-router';
<Router
history={ browserHistory }
routes={ routes }
render={ applyRouterMiddleware(
useRedial({
locals,
beforeTransition: ['fetch'],
afterTransition: ['defer', 'done'],
parallel: true,
initialLoading: () => <div>Loading…</div>,
})
)}
/>Instead of using trigger on the server side we will use a wrapper that provides additional functionally named triggerHooks. It takes an object as an argument that has the following properties that can be used to configure how the data loading should behave.
components The components that should be scanned for hooks, will default to renderProps.components
renderProps The renderProps argument that match from React Router has in the callback
hooks The hooks that should run on the server
locals Additional locals that should be provided over the default, useful for Redux integration for example
triggerHooks will return a Promise that will resolve when all the hooks has been completed. It will be resolved with an object that contains the following properties.
redialMap This should be used together with RedialContext on the server side
redialProps This is for passing the props that has been defined with setProps to the client, expected to be on window.__REDIAL_PROPS__
import { triggerHooks } from 'react-router-redial';
const locals = {
some: 'data',
more: 'stuff'
};
triggerHooks({
components,
renderProps,
hooks,
locals
}).then(({ redialMap, redialProps }) => render(redialMap, redialProps));react-router-redial provides a simple way to define in what order certain hooks should run and if they can run in parallel. The same syntax is used for both hooks when used on the server with triggerHooks and beforeTransition + afterTransition on the client with RedialContext. The hooks are expected to be an array the can contain either single hooks or arrays of hooks. Each individual element in the array will run in parallel and after it has been completed the next element will be managed. This means that you can run some hooks together and others after they have been completed. This is useful if you for instance want to run some hook that should have access to some data that other hooks before it should have defined.
Let's look at an example to understand this a bit better. Say that we have the following hooks defined on the server:
{
hooks: [ ['fetch', 'defer'], 'done' ]
}This means that the fetch and defer hooks will run at the same time and after they have been completed the done hook will run and it will then have access to the potential data that they might have set using either setProps or with for example Redux.
import { useRedial } from 'react-router-redial';
import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory, applyRouterMiddleware } from 'react-router';
import { Provider } from 'react-redux';
// Your app's routes:
import routes from '../shared/routes';
// Render the app client-side to a given container element:
export default (container, store) => {
// Define extra locals to be provided to all lifecycle hooks:
const locals = store ? {
dispatch: store.dispatch,
getState: store.getState,
} : {};
let component = (
<Router
history={browserHistory}
routes={routes}
render={ applyRouterMiddleware(
useRedial({
locals,
beforeTransition: ['fetch'],
afterTransition: ['defer', 'done'],
parallel: true,
initialLoading: () => <div>Loading…</div>,
})
)}
/>
);
if (store) {
component = (
<Provider store={store}>
{component}
</Provider>
);
}
// Render app to container element:
render(component, container);
};import { triggerHooks, useRedial } from 'react-router-redial';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { createMemoryHistory, match, applyRouterMiddleware } from 'react-router';
import { Provider } from 'react-redux';
// Your app's routes:
import routes from '../shared/routes';
// Render the app server-side for a given path:
export default (path, store) => new Promise((resolve, reject) => {
// Set up history for router:
const history = createMemoryHistory(path);
// Match routes based on history object:
match({ routes, history }, (error, redirectLocation, renderProps) => {
// Define extra locals to be provided to all lifecycle hooks:
const locals = store ? {
dispatch: store.dispatch,
getState: store.getState
} : {};
// Wait for async data fetching to complete, then render:
triggerHooks({
renderProps,
locals,
hooks: [ 'fetch', 'done' ]
}).then(({ redialMap, redialProps }) => {
const state = store ? store.getState() : null;
// Use `applyRouterMiddleware` to create the `<RouterContext/>`,
// as well as the `<RedialContext/>` and `<RedialContextContainer/>`
// around each matched route. Pass in the `redialMap` to the middleware
// to ensure we have access to it while rendering, and
// pass the renderProps provided from `match`
const component = applyRouterMiddleware(useRedial({ redialMap }))(renderProps);
const html = store ? renderToString(
<Provider store={store}>
{ component }
</Provider>
) : renderToString(component);
// Important that the redialProps are sent to the client
// by serializing it and setting it on window.__REDIAL_PROPS__
resolve({ html, state, redialProps });
})
.catch(reject);
});
});- Gustaf Dalemar - author
- Patrik Åkerstrand - Rewrote as a middleware