React native react native redux中未定义状态

我正在react原生项目中实现redux。我有一些简单的动作和一些纯粹的动作。我无法获取组件中的状态值。我怎么得到它

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

以下是我的减速机：

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

我得到的是

action.payload

警报值，但在组件中我没有得到值。我如何解决这个问题？？提前谢谢。

你能这样试试吗

...

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

...

。。。
nextScr（性别）{
警报（`gen:${gend}\n this.props.gen:${this.props.gen}`）
如果（性别！=null）{
this.props.navigation.navigate（'Info'）；
}    
}
render（）{
const{gen}=this.props；
返回(
{/*this.storeData（“男性”）this.storeData（“女性”）*/}
this.props.saveMale（'male'）}
bstyl={（gen='Male'）？[style.btn，style.btnsel]：style.btn}/>
或
this.props.saveFemale（'female'）}
bstyl={（gen='Female'）？[style.btn，style.btnsel]：style.btn}/>
性别值为：{this.props.gen}
this.nextsr（this.props.gen）}/>
);
}
...

你能这样试试吗

...

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

...

。。。
nextScr（性别）{
警报（`gen:${gend}\n this.props.gen:${this.props.gen}`）
如果（性别！=null）{
this.props.navigation.navigate（'Info'）；
}    
}
render（）{
const{gen}=this.props；
返回(
{/*this.storeData（“男性”）this.storeData（“女性”）*/}
this.props.saveMale（'male'）}
bstyl={（gen='Male'）？[style.btn，style.btnsel]：style.btn}/>
或
this.props.saveFemale（'female'）}
bstyl={（gen='Female'）？[style.btn，style.btnsel]：style.btn}/>
性别值为：{this.props.gen}
this.nextsr（this.props.gen）}/>
);
}
...

我相信您的mapStateToProps可能是问题所在，具体取决于您初始化存储的方式。现在，它假定

gen

是基本存储上的一个属性，但在创建添加另一个对象层的存储时，很可能有一个

combineRecucers

调用。

我相信，MapStateTrops可能是问题所在，具体取决于您初始化存储的方式。现在，它假定

gen

是基本存储上的一个属性，但在创建添加另一个对象层的存储时，很可能有一个

combinerecuers

调用。

没有任何更改。同样的问题，什么都没有改变。遇到同样的问题。谢谢你的回复。我应该在

MapStateTops

中进行哪些更改？是的，当我创建存储时，我有一个

combineReducers

调用。我也在该减速机中调用异步操作。我应该更改什么？这取决于您的

组合减速机的外观以及您对该减速机标识的存储部分的命名。如果您的
combinereducer
看起来像：
rootReducer=combinereducer（{genStore:genSave}）
很抱歉，我超出了5分钟的编辑限制。如果您的
combinereducer
看起来像：
rootReducer=combinereducer（{genStore:genSave}）
那么您的MapStateTrops应该看起来像
const MapStateTrops=state=>{return{gen gen:state.genStore.gen，}我建议您再做一步，编写一个选择器函数来访问您打算使用的商店部分。谢谢您的回复。我应该在
MapStateTops
中进行哪些更改？是的，当我创建存储时，我有一个
combineReducers
调用。我也在该减速机中调用异步操作。我应该更改什么？这取决于您的
组合减速机的外观以及您对该减速机标识的存储部分的命名。如果您的
combinereducer
看起来像：
rootReducer=combinereducer（{genStore:genSave}）
很抱歉，我超出了5分钟的编辑限制。如果您的
combinereducer
看起来像：
rootReducer=combinereducer（{genStore:genSave}）
那么您的MapStateTrops应该看起来像
const MapStateTrops=state=>{return{gen gen:state.genStore.gen，}我建议您再做一步，编写一个选择器函数来访问您打算使用的商店部分。