I'm getting into react native and redux, and as far as I understand all reducers are invoked upon a triggered event that changes state, regardless of whether it is tied to the specific action triggered. So my question is... isn't this highly inefficient? For example, in responding to a touch event, without redux you have one callback responding to the event. However, with redux, every reducer in your app is invoked even if that action/state has nothing to do with the event in question. How is this good?
One way to optimize your redux store(s) is to to use selectors with a library such as Reselect as documented here in the Redux docs.
Related
I have small issue while integrating redux in my react native application. Everything is ok right from creating the action creator and calling the asynchronous network api to dispatching the payload to the app state and then include it as props from mapStatetoProps function. But my problem is, lets say from one screen I initiated the action creator which brings some data from server. Now once the action is performed and the data is received in the action, I need to intimate the screen to do something or show something.
My screen is a class based component and is receiving the data from the mapStatetoProps function but how it should know that data has come and show some alert or do some action. Is there any event listeners we can include in react native apps which works on real devices as well?
I have a FlatList which I would like to optimize by using pure components.
As I am new to react-Native I am not sure how pure component will act in a situation were actions(functions) will be passed as props.
I know that their benefit is reached by shalow comparison of state and props which prevents rerender but I am not sure how a redz action will affect.
I assume that since it doesn't change it won't affect the performance.
Is this assumption is correct?
FlatList is already a PureComponent and I would definitely not suggest to optimize it in this way as you can easily run into bugs. It already takes care of rerendering things when necessary. But answering your question - same redux action is the same function across rerenders, you can comfirm it with console.log(this.props.myAction === this.props.myAction)
Currently, I read some state from AsyncStorage in componentWillMount. However, some screens modify what is in AsyncStorage, and it does not appear that componentWillMount is called when returning (this.props.navigation.goBack()) to a screen, so they don't receive the update.
What, if anything, is called? What are the component lifecyle functions that are called on the return to a screen? Are any of these only called once, when the screen is to be shown again?
componentDidFocus is currently in design not avaiable yet, see react-native open issue #51.
Try this alternative way react-navigation-addons.
Consider the TextInput component of React Native. It has a prop called value. I set the value to this.state.text.
It also has a prop onChangeText, which I set to (text) => {this.setState({text: text}).
Setting the state will cause the view to re-render, which will in turn trigger setValue on the component.
This doesn't cause any sort of recursion or undesired behavior with stock components. However, in building my own text input component, I'm finding that using state in value and in onChangeText causes native input events to re-render the view and call setValue.
i.e user types on keyboard, native module emits onChangeText event, JavaScript component receives event and updates state, state change causes re-render, re-render calls setValue on the native component, and the native component swaps out the text with the value received from the initial event (the same value).
The problem is, when you set the text on an iOS or Android native text component, it resets the cursor. So I tried putting in a conditional if(newText != currentText) {setText(newText)}, and this works when you type slow, but when you type fast, things get chaotic and you can't predict the order of events.
I looked at how the React Native authors handle this in their own text component, and they seem to be using some sort of counter (here and here) to synchronize events, but I couldn't keep up with the logic as it was all over the place.
For now, my solution is to not use state in the render function, but then my component depends on render not being called unexpectedly to function properly, and that's just a disaster waiting to happen.
Any insight as how to better design a component like this, or how RN components get around this issue?
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.