React native redux saga how to show error to user - react-native

Question

I am new to react native and react-saga. I have the api call working and as far as I can see everything is working as expected. But how do I display the error that I am getting from the server back to the user. Sorry if this is a trivial question. here is my code so far
Containers/GetUserInfo.js
moveToJoinScreen(){
this.props.getStudentAvator(vouchercode, DeviceInfo.getUniqueID(), 'iOS');
}
render () {
return (
<View style={styles.container}>
<TouchableHighlight onPress={() => this.moveToJoinScreen()} underlayColor='#ff000000'>
<Image style={styles.imagestyle} style={{height:60, width:150}} source={Images.joinNow} />
</TouchableHighlight>
<Text style={styles.welcome}>
{'\n'}
</Text>
<TouchableHighlight onPress={() => this.moveToRegisterScreen()} underlayColor='#ff000000'>
<Image style={styles.imagestyle} style={{height:80, width:150}} source={Images.registerMyId} />
</TouchableHighlight>
</View>
)
}
}
const mapDispatchToProps = dispatch => ({
getStudentAvator:(emailaddress, deviceid, platform) => dispatch(StudentActions.SetupVoucherRequest(vouchercode, deviceid, platform))
})
export default connect(null, mapDispatchToProps)(LaunchScreen)
here is the saga.js
export function* SetupVoucherRequest(api, action) {
const { vouchercode, deviceid, platform } = action
if(vouchercode.length >11 || vouchercode.length < 10)
{
yield put(StudentCardActions.SetupVoucherFailuer())
return
}
// make the call to the api
const response = yield call(api.SetupVoucher, vouchercode, deviceid, platform)
if (response.ok) {
const firstUser = 'fahad'
const avatar = 'Avatar_Fahad'
// do data conversion here if needed
yield put(StudentCardActions.SetupVoucherSuccess(avatar))
} else {
yield put(StudentCardActions.SetupVoucherFailuer())
}
}
Not sure how I can pass the error back to the container page to display the error. Any help would be greatly appreciated. Thanks in advance

Answer 1

When you call put(StudentCardActions.SetupVoucherFailuer()) you should update your state with the error and then pass the error to your ui via mapStateToProps
const mapStateToProps = state => ({
error: state.myStoreName.error,
// depending on how your store is setup you might
// have to use state.get('myStoreName').error
})
export default connect(mapStateToProps, mapDispatchToProps)(LaunchScreen)
Now you can access the error in your ui via this.props.error