state undefined in react-native redux

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

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.

Answer 2

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>
        );
    }

...