Slow state update in redux - react-native

Question

So I have this problem where a variable update is slower than a route change.
When I have an error on for example my registration view, the error shows up instantly. When press back to come back to the login view, the error is being reset (action "clearErrors" is being fired on componentWillUnmount) to an empty string via an action. The problem is that I can se the error message on the login for a brief moment before it receives the new empty error state.
ErrorReducer.js
import {
ERROR,
CLR_ERROR
} from '../actions/types';
const INIT_STATE = {
error: ''
};
export default (state = INIT_STATE, action) => {
switch (action.type) {
case ERROR:
return { ...state, error: action.payload };
case CLR_ERROR:
return { ...state, error: '' };
default:
return state;
}
};
error.js (actions)
import { CLR_ERROR } from './types';
export const clearErrors = () => {
return (dispatch) => {
dispatch({ type: CLR_ERROR });
};
};
LoginForm.js
import React, { Component } from 'react';
import { View } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { connect } from 'react-redux';
import { emailChanged, passwordChanged, loginUser, resetRoute, autoLogin } from '../actions';
import { Button, Input, Message } from './common';
class LoginForm extends Component {
componentWillUnmount() {
this.props.resetRoute();
}
onEmailChange(text) {
this.props.emailChanged(text);
}
onPasswordChange(text) {
this.props.passwordChanged(text);
}
onButtonPress() {
this.props.loading = true;
const { email, password } = this.props;
this.props.loginUser({ email, password });
}
render() {
return (
<View
style={{
flex: 1,
marginLeft: 10,
marginRight: 10,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
}}
keyboardShouldPersistTaps="always"
keyboardDismissMode="on-drag"
>
<Message
type="danger"
message={this.props.error}
/>
<Input
placeholder="din#email.se"
keyboardType="email-address"
returnKeyType="next"
onChangeText={this.onEmailChange.bind(this)}
value={this.props.email}
icon="ios-mail"
/>
<Input
secureTextEntry
placeholder="ditt lösenord"
onChangeText={this.onPasswordChange.bind(this)}
value={this.props.password}
icon="ios-key"
iconSize={22}
/>
<Button
loading={this.props.loading}
uppercase
color="primary"
label="Logga in"
onPress={this.onButtonPress.bind(this)}
/>
<Button
fontColor="primary"
label="Registrera"
onPress={() => Actions.register()}
/>
<Button
fontColor="primary"
label="Glömt lösenord"
onPress={() => Actions.resetpw()}
/>
</View>
);
}
}
const mapStateToProps = ({ auth, errors }) => {
const { email, password, loading, token } = auth;
const { error } = errors;
return { email, password, error, loading, token };
};
export default connect(mapStateToProps, {
emailChanged, passwordChanged, loginUser, resetRoute, autoLogin
})(LoginForm);
Message.js (component to show error)
import React from 'react';
import { View, Text } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { colors } from '../style';
export const Message = ({ type, message }) => {
const style = {
view: {
alignSelf: 'stretch',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 20,
margin: 15,
backgroundColor: colors[type],
borderRadius: 3,
elevation: 5,
shadowRadius: 5,
shadowColor: colors.smoothBlack,
shadowOffset: { width: 2.5, height: 2.5 },
shadowOpacity: 0.5
},
text: {
color: colors.alternative,
fontSize: 12,
alignSelf: 'center',
flex: 1
},
icon: {
marginRight: 20,
marginLeft: 0,
marginTop: 2,
alignSelf: 'center'
}
};
const getIcon = (iconType) => {
switch (iconType) {
case 'info':
return 'ios-information-circle';
case 'success':
return 'ios-checkmark-circle';
case 'danger':
return 'ios-alert';
case 'warning':
return 'ios-warning';
default:
return;
}
};
if (message.length > 0) {
return (
<View style={style.view}>
{(type) ? <Icon name={getIcon(type)} size={20} style={style.icon} /> : null}
<Text style={style.text}>{message}</Text>
</View>
);
}
return <View />;
};
I am running on device OnePlus3 with all console.logs removed, production build.
From what I have read, this should be fast. Am I doing something wrong here?

Answer 1

It's impossible to say without looking at your rendering code, but it's likely that the slowness is not caused by the time it takes for redux to update the state, but for React to re-render the UI after the dispatch has completed - possibly because it's busy re-rendering other things while your navigator is transitioning.
To guarantee the ordering of actions with redux-thunk, you can return a Promise from your thunk action creator and wait to navigate back until the action has been dispatched:
export const clearErrors = () => {
return (dispatch) => {
return new Promise(dispatch({ type: CLR_ERROR }));
};
};
In your view then, you can do the back navigation action once the error has been cleared:
// assuming the action creator has been passed
// to the component as props
this.props.clearErrors().then(() => navigator.back());