It delays route transition until all promises returned by prefetch methods of components defined within corresponding route are resolved or rejected.
A list of react components (not component instances) corresponding to the current route. Usually provided by by <Router>
or match
from react-router
.
Router params. Usually provided by <Router>
or match
from react-router
.
Function that accepts props and uses them to render components. It defaults to:
Boolean that flags whether or not the data was prefetched on the server. Required for universal/isomorphic apps.
const render = (props) => <RouterContext {...props} />
you can also use applyRouterMiddleware
:
// on the client
const render = applyRouterMiddleware(useScroll())
prefetch(actionCreator)
This function is used to decorate your container components that are connected to the router. It provides parameters for you to use in generating actions that you want dispatched before the route resolves.
@asyncConnect(({ params }) => ({
type: 'GET_TODO',
payload: fetch(`/api/todos/${params.todo}`),
})
@connect((state, ownProps) => ({
todo: state.todos.find(({ id }) => id === ownProps.params.id),
})
export default class Todo extends Component {
// ...
}
actionCreator
is a callback function which should return actions you want to dispatch. In order for prefetch to work, these actions must eventually return a promise (via whatever middleware you are using). The example above would work with redux-proimse
The actionCreator
callback will be called with whatever options you pass to it with prefetchData
.
The actionCreator
callback will be called with whatever props you pass to <Prefetcher>
plus a reference to the store.
Given you use something like this:
// on the server
prefetchData({ ...renderProps, store }).then(() => {
// etc...
});
// on the client
const component = (
<Router
render={(props) => <ReduxAsyncConnect {...props} prefetchedOnServer />}
history={history}
routes={getRoutes(store)}
/>
);
Then the options would include the following keys
- store - Includes methods
dispatch
andgetState
- params - The route params
- matchContext
- router
- history
- location
- routes
Used to prefetch data on the server before rendering components.
options
- Object containing allrenderProps
(typically provided bymatch
fromreact-router
) and yourredux
store.