protect those containers from breaking when state needs data
basic usage with protect
and required params:
-
guard : [Function]
- handler that detects and resolves an invalid state -
mstp
- mapStateToProps forconnect
-
mdtp
- mapDispatchToProps forconnect
import { protect, inSuspense } from "react-redux-guard";
const guard = props => {
if (!props.hasProfile) {
inSuspense(props.fetchProfile);
}
};
const mstp = state => ({
hasProfile: selectors.hasProfile(state)
});
const mdtp = dispatch => ({
fetchProfile: done => dispatch(actions.fetchProfile(done))
});
ProfileViewer.Protected = protect(guard, mstp, mdtp)(ProfileViewer.Connected);
define more than one guard config to protectAll
import { protectAll, inSuspense } from "react-redux-guard";
export const profile = {
mstp: state => ({
hasProfile: selectors.hasProfile(state)
}),
mdtp: dispatch => ({
fetchProfile: done => dispatch(actions.fetchProfile(done))
}),
guard: props => {
if (!props.hasProfile) {
inSuspense(props.fetchProfile);
}
}
};
ProfileViewer.Protected = protectAll([guards.profile]);
TODO: describe inSuspense