React Native - mapStateToProps called but no re-rendering - react-native

Question

I started React Native / Redux development for two weeks now, and i have some issues with the mapStateToProps and re-rendering.
Here are the facts :
mapStateToProps is called correctly with the right state (the new one)
render function is not called after the mapStateToProps
I have already check the troubleshooting page of Redux about that, and i dont have mutable issue
Here is the code :
Component
import React from 'react';
import { connect } from 'react-redux';
import { View, StyleSheet } from 'react-native';
import { Item, Input, Button, Text } from 'native-base';
import { signup } from './../actions/signup.action';
class Signup extends React.Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
confirmPassword: ''
};
}
render() {
console.log('rendering', this.props);
return (
<View style={styles.container}>
<Item rounded>
<Input placeholder='Email' onChangeText={(text) => this.setState({email: text})} value={this.state.email} />
</Item>
<Item rounded>
<Input placeholder='Mot de passe' secureTextEntry={true} onChangeText={(text) => this.setState({password: text})} value={this.state.password} />
</Item>
<Item rounded>
<Input placeholder='Confirmation du mot de passe' secureTextEntry={true} onChangeText={(text) => this.setState({confirmPassword: text})} value={this.state.confirmPassword} />
</Item>
<Button rounded onPress={(e) => this.onSignup(this.state.email, this.state.password)}>
<Text>Créer un compte</Text>
</Button>
<Text>{this.props.isSignupLoading}</Text>
<Text>{this.props.signupError}</Text>
</View>
)
}
onSignup = (email, password) => {
this.props.signup(email, password);
}
}
const mapStateToProps = (state) => {
return {
isSignupLoading: state.isSignupLoading,
isSignupSuccess: state.isSignupSuccess,
signupError: state.signupError
};
};
const mapDispatchToProps = (dispatch) => {
return {
signup: (email, password) => dispatch(signup(email, password))
};
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF",
},
});
export default connect(mapStateToProps, mapDispatchToProps)(Signup);
Actions
import { firebaseAuth } from './../config/firebase';
export const signupLoading = (isSignupLoading) => {
return {
type: 'SIGNUP_LOADING',
isSignupLoading
};
}
export const signupSuccess = (isSignupSuccess) => {
return {
type: 'SIGNUP_SUCCESS',
isSignupSuccess
};
};
export const signupError = (error) => {
return {
type: 'SIGNUP_ERROR',
signupError: error.message
};
};
export const signup = (email, password) => {
return (dispatch) => {
dispatch(signupLoading(true));
firebaseAuth.createUserWithEmailAndPassword(email, password)
.then(() => dispatch(signupLoading(false)))
.then(() => {
console.log("signup.action#signup success");
dispatch(signupSuccess(true));
})
.catch((error) => {
console.log("signup.action#signup failed - " + error);
dispatch(signupLoading(false));
dispatch(signupError(error));
});
};
};
Reducer
const defaultState = {
isSignupLoading: false,
isSignupSuccess: false,
signupError: null
};
const signupReducer = (state = defaultState, action) => {
switch (action.type) {
case 'SIGNUP_LOADING':
return Object.assign({}, state, {
isSignupLoading: action.isSignupLoading
});
case 'SIGNUP_SUCCESS':
return Object.assign({}, state, {
isSignupSuccess: action.isSignupSuccess
});
case 'SIGNUP_ERROR':
return Object.assign({}, state, {
signupError: action.signupError
});
default:
return state;
}
}
export default signupReducer;
If you want more code about what i have done, ask me.
Thanks for your help.
Best regards.

Answer 1

I met the same issue as you. You should fix it by modifying your mapStateToProps as following. This is due to signupReducer/signupReducer/signupError is under signupReducer not state.
const mapStateToProps = (state) => {
return {
isSignupLoading: state.signupReducer.isSignupLoading,
isSignupSuccess: state.signupReducer.isSignupSuccess,
signupError: state.signupReducer.signupError
};
};