react-redux-resolve
v1.0.2
Published
Experimental library to universally resolve your component's initial data.
Downloads
3
Maintainers
Readme
React Redux Resolve
Experimental library to universally resolve your component's initial data. Per component you can specify a resolver
. On the client side, the resolver
is executed in componentDidMount()
and on the server-side once you call waitForResolves(renderProps, store)
. This makes server-side rendering easy to implement!
import { resolve } from 'react-redux-resolve';
@resolve(({ dispatch }) => dispatch(fetchSandwich()))
class MyComponent extends Component {
render() {
const { sandwich } = this.props;
return (
<Sandwich sandwich={sandwich} />
);
}
}
Where fetchSandwich()
is something like the below (please note the example doesn't handle errors). This requires the redux-thunk middleware:
function fetchSandwich() {
return (dispatch) => {
dispatch({
type: 'FETCH_SANDWICH_STARTED',
sandwich: sandwich
});
return fetch('http://example.com/api/sandwich')
.then((response) => response.json())
.then((sandwich) => {
dispatch({
type: 'FETCH_SANDWICH_SUCCEEDED',
sandwich: sandwich
});
});
};
}
Now, say you're rendering your app on the server, you can easily access the @resolve()
. You can do this by accessing .resolves
on the components. We've created a helper method called waitForResolves(renderProps, store)
to do this:
import { waitForResolves } from 'react-redux-resolve';
// Set up your server-side rendering like you normally would do.
match({ routes, location }, (error, redirectLocation, renderProps) => {
if (redirectLocation) {
// TODO: 3xx
}
else if (error) {
// TODO: handle error
}
else if (!renderProps) {
// TODO: 404
}
else {
// Here we call the helper method `waitForResolves`. It calls
// all your components's resolve methods and returns a promise
// which is resolved once all
waitForResolves(renderProps, store)
.then(() => {
// TODO: render html
});
}
});
API
resolve(resolver)
@resolve(({ dispatch }) => dispatch(..))
class MyComponent extends Component { };
resolver
receives an object with the following keys as argument:
dispatch
: the store's dispatch functiongetState
: the store's getState functionhistory
: the history object from your routerparams
: the params object from the routequery
: the query object from the route
Please note resolve()
returns a new component wrapped with the target component, similar to connect()
. To use resolve()
in ES5, try the following:
MyComponent = resolve(function(obj) {
return obj.dispatch(..);
})(MyComponent);