I have a fairly standard React Native functional component that uses a selector to retrieve a view model from my Redux store(Using redux-observable for async actions), and render it on changes, pseudo code below.
I'm implementing deeplinking, and my problem is that the store code works (I parse the URL and dispatch actions to my Redux store depending on route, navigate to the page, and the data should show) but it does not seem to re-render after an asynchronous action.
From what I can see, the action is dispatching in the background, it makes the async call, dispatches a success action and the store is updated successfully, the component simply does not re-render.
Any ideas? It seems to be an issue with the useSelector hook not firing, on that specific component that is loaded, as navigating away and using other pages works fine.
The user flow is:
- User presses a notification which contains a deeplink
- This navigates to a specific page
- Data is loaded in the background
- Upon successful fetch, the page should re-render
function MyPage() {
const dispatch = useDispatch();
const vm = useSelector(selectMyPageVM);
return (<View><Text>{vm.someProp}</Text></View>);
}