React Native - 调用了 mapStateToProps 但没有重新渲染

Question

我开始 React Native / Redux 开发两周了，我在 mapStateToProps 和重新渲染方面遇到了一些问题。

以下是事实：

• mapStateToProps 以正确的状态（新状态）正确调用
• mapStateToProps 后不调用渲染函数
• 我已经查看了 Redux 的故障排除页面，我没有遇到可变问题

代码如下：

组件

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

操作

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

减速器

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;

如果你想了解我所做的更多代码，请询问我。

感谢您的帮助。 最好的问候。

Answer 1

我遇到了和你一样的问题。您应该通过如下修改 mapStateToProps 来修复它。这是由于 signupReducer/signupReducer/signupError 处于 signupReducer 未状态。

const mapStateToProps = (state) => {
    return {
        isSignupLoading: state.signupReducer.isSignupLoading,
        isSignupSuccess: state.signupReducer.isSignupSuccess,
        signupError: state.signupReducer.signupError
    };
};