状态在反应新的redux中不确定

Question

我正在在反应生命项目中实现redux。我有一些Asyn行动和一些纯粹的行动。我无法在组件中获得状态价值。我如何得到它。？

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

这些是我的行为：

export const saveMale = (gen) => ({
            type: MALE_SAVE,
            payload: gen 
});
export const saveFemale = (gen) => ({
            type: FEMALE_SAVE,
            payload: gen
});

以下是我的还原器：

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警报值，但是在组件中，我没有得到值。如何解决这个问题？预先感谢。

Answer 1

您可以尝试吗？

...
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

我相信您的mapstatetoprops可能是您的初始化商店的问题。现在，它假设gen是基本商店上的属性，但是当您创建添加另一个对象层的商店时，您可能会有一个combineRecucers调用。