reactjs


React HOC won't trigger on route change


I have preload HOC on each component that is referenced in Router. This component takes a function that returns promise. On wrapping it will run the the function and until promise it returns isn't resolved, it displayes preloader. Once promise is resolved (data are fetched and stored in my MobX store), original component displays.
Works fine via observables and stuff, however the HOC (aka function) "runs" only when I first hit my app. When I switch between routes, preload function isn't even triggered, no matter how I try to run it. It just renders the component that should be wrapped in that HOC (thus I have no data, thus react screams I'm a dick for not providing props)
Here is my preload HOC
export function preload(loadingFunc :Function) {
Store.ui.startPreloading()
return (DecoratedComponent :Class<*>) => {
#observer
class PreloadHOC extends Component {
render() {
if (Store.ui.preloading) {
loadingFunc(Store, this.props.params)
.then(Store.ui.stopPreloading)
return (<Preloader />)
} else {
return (<DecoratedComponent {...this.props}/>)
}
}
}
return PreloadHOC;
}
}
And I use to like this...
#preload((store: Object): Promise<*> => {
return store.article.loadStuff()
})
class Article extends Component {...}
It's worth noting, that my other HOC (that I use to populate Component with data) triggers every time properly.
PS: When I log components from router, they are inside this preload function
Any ideas?

Related Links

How to set checked on item in DetailsList control
Accessible file upload in React (no drag/drop, no jQuery)
Snapshot testing ChartJS components with Jest
How do I get scss working with a react project?
Cannot read property “charAt” of undefined
SPClientPeoplePicker is undefined using SPF'x
React: To put simple logic in Container or Presentational component?
ReactJs - How to get updated state while inside a thunk promise
Syntax error on comonent proxy
TypeScript custom declaration files for untyped npm modules
React native ex-navigation chnaging routers
React and Authorization using an API
electron not allowed to load local resource
How to use jsx-control-statements in reactjs?
Leaflet with Webpack: error in css-loader
React - Where should I load async data?

Categories

HOME
internet-explorer
kendo-ui
pelican
grpc
android-ndk
glsl
livecharts
datetimepicker
mingw
clip-path
wavefront
android-webview
webpack-dev-server
guidewire
repeater
sha1
dompdf
bookmarklet
google-street-view
caldav
formulas
nsopenpanel
visual-studio-community
orgchart
hierarchical-data
launchd
checkmarx
undo
wercker
snapkit
incapsula
redhat-brms
mapquest
server-side-swift
electron-packager
ape-phylo
mtm
gradlew
evaluation
jenkins-docker
r-commander
typewriter
jtextarea
sqlproj
lattice
optional-parameters
xcode7.1
gdi
avi
sbt-proguard
archiva
nd4j
dynamics-nav
sdkman
taverna
redquerybuilder
biginsights
syncano
polarion
fileinputstream
ultraedit
veeam
chunks
drools-guvnor
sync
parallel-port
ant-contrib
smartxls
node-mongodb-native
mongoid4
.net-reflector
imaplib
jfilechooser
sygic
ie-developer-tools
static-class
playing-cards
qgraphicsscene
kademlia
msbuild-task
biztalk-deployment
linqdatasource
screensharing
hypertable
google-email-audit-api
bash4
jqueryi-ui-buttonset
inserthtml
virtual-printer
mass-emails
p4.net
dongle
dojox.gfx
authkit
user-preferences

Resources

Encrypt Message