I've got a app that has a collection of scenes, and make many calls to a remote server that because they control hardware can take quite a while. In my redux store I have a variable that represents if there are any requests inflight.
What I'm trying to achieve is having a spinner or loading scene defined in a single place, and having automatically show dependent on the state of variable in the redux store.
I think that the answer lies in having a modal scene for the loading page, but the bit I'm missing is how to have it automatically displayed (and hidden) based from the state in the store. I don't want to call Actions.loadingScene() from all the places that makes the requests.
I've got a reducer in place that see's all the actions (both the application and the RNRF actions), but I couldn't work how what state I had to mutate to get it to display the modal scene.
Any pointers would be great!.
It appears that redux-saga would be the way to solve this, however I ended up making a HOC that adds the spinner, and displays it when required. It does mean that I have to remember to wrap all scenes with the HOC but that it OK.
Related
I wanted to see if there is a hook in Seaside that is called before rendering, and one after rendering. It happens to me that I want to show a notification on the screen, and I would like that once the rendering is finished, this component is modified so that the next time the rendering is done, it is no longer displayed.
Thanks and regards!
Instead of 'hooks', Seaside has component decorations that you can wrap around a component to change their behaviour. If you wrap your root component, you can implement a decoration that invokes hooks before and after rendering on your entire component tree.
However, changing the state of your components while rendering will break the state backtracking behavior that Seaside offers you. The state changes should happen in the action callbacks. So, there is no 'after rendering' phase where you can change the state of your component (well, you can, but it will lead to subtle problems). Instead, use the action phase (i.e. callbacks) to change the state of your component such that the next time the rendering phase is invoked, your component is not displayed.
I'm assuming that when you say 'the next time the rendering is done', this means after the user has clicked a link or done some other action. This means you can change state while executing the action callback and arrange the state of your rendering tree such that the concerned component is no longer shown. If you do it like this, the user will see the component again when he clicks the back button in the browser.
We use wix/react-native-navigation and tried to use Context API from react.We need all the screenshots to receive data and when changing in one place, there is a change in all places.The api context is not suitable, it makes a context for each screen, that is, when changed in 1 screen, the data will not be rerender in another. I would also not like to use Redux since editors are not signed in all screenshots, and it’s too difficult to forward props.
Does anyone have any ideas how to solve this problem?
This seems to be a case for the model view controller pattern.
Each screen would be a view in this pattern. You need to trigger a rerender when the data changes. You can define functions in the react context (model) and then reference it in your lifecycle methods (controller) of your different views.
This is a conceptional question, in this case a component is a screen, if that makes sense
Is there a good solution for fluently preloading a component? What I mean by that is perhaps calling a portion of a component, before opening up the view
an example of this is say, snapchat stories, when greyed out on press will simply load. The second press then opens up the view. Essentially allows you to preload before then navigation to the view
Is this a Redux task? Does anyone have an example?
Seems like some concepts are mangled in your mind. What you are trying to achieve is not to preload components, rather run logic before drawing anything on the screen OR preloading some media. Therefore, what you need to do is not to preload anything, but to seperate your logic from your view (let's say video data from showing video itself), retrieve / prepare data (download video for example) and after it is ready show your component.
Also, if what you are trying to preload is just media, you should checkout react-preload.
My app is running a split view screen with left and right sub screens, I am also using redux. I have one state for "SplitView", one state for "LeftScreen" and another for "RightScreen". These states control the navigation for each of them. It works well for the most parts except one thing which when I navigate, all three screen will be reloaded, and even the HTTP request will be reloaded each time I navigate either on "LeftScreen" or "RightScreen".
Is this normal? or is there a better way to handle state change/navigation?
thanks
I'll do my best to explain this without code, which, in my opinion will not add clarity to this question as PanResponder code is quite complicated, and i need only concept, not the code itself.
So, i've implemented pagination, something like in this gif.
The idea is to have only 3 "pages" rendered at a time. If user goes to the next scene (swipes from right to left), app fetches one more scene from server and renders it behind currently active scene. etc.
Once user swiped to the next scene, i need to reset panResponder: the "nextScene" should appear at the default position between new nextScene and prevScene and then user will be able to swipe again.
The problem is that i don't know how to make it smooth. Right now i'm just passing new props (new currentScene, nextScene, prevScene) and changing key property of panResponder component. If a new scene contains images, they seems to be refetched each time when i'm changin key. That, probably, fixable by proper caching, but this makes me doubt if my approach is correct. Is there another way to make the reset of panResponder component and put the new scene into default position between new nextScene and prevScene.