state undefined in react-native redux - react-native

Question

I am implementing redux in react-native project. I have some asyn action and some pure actions. I am unable to get state value in my component. How do I get it.?
class Gender extends Component {
constructor(props) {
super(props);
}
nextScr = (gend) => {
alert(`gen: ${gend} \n this.props.gen: ${this.props.gen}`)
//***** here I am getting undefined ****
if(gend!= null) {
this.props.navigation.navigate('Info');
}
}
render() {
const { gen } = this.props;
return (
<View style={style.container}>
<View style={style.bcont}>
{/* this.storeData("Male") this.storeData("Female") */}
<Btn name="gender-male" txt="Male" click={() => this.props.saveMale('male')}
bstyl={(gen == 'Male') ? [style.btn, style.btnsel] : style.btn} />
<Text style={style.hi}>OR</Text>
<Btn name="gender-female" txt="Female" click={() => this.props.saveFemale('female')}
bstyl={(gen == 'Female') ? [style.btn, style.btnsel] : style.btn} />
</View>
<Text>Gender Value is: {this.props.gen}</Text>
// **** here not getting gen value ****
<Next name="chevron-right" nextClk={ () => this.nextScr(gen)} />
</View>
);
}
}
const mapStateToProps = state => {
const { gen } = state
return {
gen: gen,
};
};
const mapDispatchToProps = dispatch => {
return {
saveMale: (gen) => {
dispatch(saveMale(gen));
},
saveFemale: (gen) => {
dispatch(saveFemale(gen));
}
}
};
export default connect(mapStateToProps, mapDispatchToProps)(Gender);
These are my actions:
export const saveMale = (gen) => ({
type: MALE_SAVE,
payload: gen
});
export const saveFemale = (gen) => ({
type: FEMALE_SAVE,
payload: gen
});
Following is my reducer:
const initialState = {
gen: null
}
export function genSave(state=initialState, action) {
switch(action.type) {
case MALE_SAVE:
alert(`state in MALE_SAVE: ${action.payload}`);
return { ...state, gen: action.payload };
case FEMALE_SAVE:
alert(`state in FEMALE_SAVE: ${action.payload}`);
return { ...state, gen: action.payload };
default:
alert(`state in default gender save: ${JSON.stringify(state)}`);
return state;
};
}
I am getting action.payload alert values but in the component I am not getting values. How do I solve this problem ?? Thanks in advance.

Answer 1

Can you try like this?
...
nextScr(gend) {
alert(`gen: ${gend} \n this.props.gen: ${this.props.gen}`)
if(gend!= null) {
this.props.navigation.navigate('Info');
}
}
render() {
const { gen } = this.props;
return (
<View style={style.container}>
<View style={style.bcont}>
{/* this.storeData("Male") this.storeData("Female") */}
<Btn name="gender-male" txt="Male" click={() => this.props.saveMale('male')}
bstyl={(gen == 'Male') ? [style.btn, style.btnsel] : style.btn} />
<Text style={style.hi}>OR</Text>
<Btn name="gender-female" txt="Female" click={() => this.props.saveFemale('female')}
bstyl={(gen == 'Female') ? [style.btn, style.btnsel] : style.btn} />
</View>
<Text>Gender Value is: {this.props.gen}</Text>
<Next name="chevron-right" nextClk={ () => this.nextScr(this.props.gen)} />
</View>
);
}
...

Answer 2

I believe your mapStateToProps could be the problem depending on how you initialize your store. Right now it assumes gen is a property on the base store but it is likely you have a combineRecucers call when you create the store that adds another object layer.