Where should I dispatch actions to fetch my data using React-Native and redux – Facebook api

I want to fetch all the data needed to display the dashboard of my app in react-native. The app is similar to the facebook one

I am using react-native, redux, redux-saga, react-navigation and a REST api.

I have to fetch the post list to display the main page and the notification count for the headerBar. The other tabs pages are mounted at the same time as the main one to allow fluid transition. So I need the current user too for the Account page

Finally, the store is persisted and the app can stay in background mode for a long time. So I need to refresh my data often to be sure to have the last changes.

I have sagas which make the call and launch actions to update the store.

Here the strategies I found :

1. I can connect each page component and give them a fetchAllPageData() which dispatch a fetch action that I call in componentDidMount
2. I can connect smaller components to allow them to pull the data they need with the same strategy (ie. fetchUser to the component that display the user in the Account Page, fetchNotificationCount to the component that display the number of notifications …)
3. I can use create a redux-middleware which listen for page change and call all fetch data actions.

I am currently using a mix of the first and second solutions but I am not very happy with it :

• I don’t always know where the data are fetched
• The strategies which refresh the data once the component is mounted are a bit “hacky” and random
• I often have the to move where the call is done when refactoring

What is the state of the art on this subject? What is your recommendation?