javascript - Redux reducer 被调用两次

Question

我正在使用 Redux 开发 React Native 应用程序。

该应用程序有一个简单表单的注册屏幕:

import React from 'react';
import {
    Alert,
    Button,
    KeyboardAvoidingView,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View
} from 'react-native';
import {connect} from "react-redux";
import {register} from "../redux/actions/Registration";
import {REGISTER} from "../redux/constants/ActionTypes";
import Loader from "./Loader";

const mapStateToProps = (state, ownProps) => {
    return {
        isLoggedIn: state.registration.isLoggedIn,
        token: state.registration.token,
        isLoading: state.common.isLoading,
        error: state.common.error
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        onRegister: (username, password, firstName, lastName) => {
            dispatch(register(username, password, firstName, lastName));
        }
    }
};

@connect(mapStateToProps, mapDispatchToProps)
export default class RegistrationForm extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            route: REGISTER,
            email: '',
            password: '',
            firstName: '',
            lastName: '',
            isLoading: false
        }
    }

    register(e) {
        this.props.onRegister(
            this.state.email,
            this.state.password,
            this.state.firstName,
            this.state.lastName
        );
        e.preventDefault();
    }

    componentDidUpdate() {
        if (this.props.error != null && this.props.error !== undefined && this.props.error !== '') {
            setTimeout(() => Alert.alert(this.props.error), 600);
        }
    }

    render() {
        const {isLoading} = this.props;

        return (
            <View style={styles.container}>
                <KeyboardAvoidingView style={styles.registration_form} behaviour="padding">

                    <Loader loading={isLoading}/>

                    <TextInput style={styles.text_input} placeholder="First Name" placeholderTextColor="white"
                               underlineColorAndroid={'transparent'}
                               onChangeText={(text) => this.setState({firstName: text})}/>
                    <TextInput style={styles.text_input} placeholder="Last Name" placeholderTextColor="white"
                               underlineColorAndroid={'transparent'}
                               onChangeText={(text) => this.setState({lastName: text})}/>
                    <TextInput style={styles.text_input} placeholder="Email" placeholderTextColor="white"
                               underlineColorAndroid={'transparent'} keyboardType="email-address"
                               onChangeText={(text) => this.setState({email: text})}/>
                    <TextInput style={styles.text_input} placeholder="Password" placeholderTextColor="white"
                               underlineColorAndroid={'transparent'}
                               onChangeText={(text) => this.setState({password: text})}
                               secureTextEntry={true}/>

                    <TouchableOpacity style={styles.button} onPress={(e) => this.register(e)}>
                        <Text style={styles.btn_text}>Sign up</Text>
                    </TouchableOpacity>

                    <Button buttonStyle={{marginTop: 40}}
                            backgroundColor="transparent"
                            textStyle={{color: "#fff"}}
                            title="Login"
                            onPress={() => this.props.navigation.navigate('Login')}/>

                </KeyboardAvoidingView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#36485f',
        paddingLeft: 60,
        paddingRight: 60
    },
    registration_form: {
        alignSelf: 'stretch',

    },
    text_input: {
        alignSelf: 'stretch',
        height: 40,
        marginBottom: 30,
        color: '#fff',
        borderBottomColor: '#f8f8f8',
        borderBottomWidth: 1
    },
    button: {
        alignSelf: 'stretch',
        alignItems: 'center',
        padding: 20,
        backgroundColor: '#59cbbd',
        marginTop: 30
    },
    btn_text: {
        color: '#fff',
        fontWeight: 'bold'
    }
});

此外，我还创建了操作:

1) Common.js

import {FAILED, LOADING} from "../constants/ActionTypes";


export const loading = (isLoading) => {
    return {
        type: LOADING,
        isLoading: isLoading
    }
};

export const failed = (error) => {
    return {
        type: FAILED,
        error: error
    }
};

2) Registration.js:

import {userService} from "../../service/UserService";
import {REGISTER} from "../constants/ActionTypes";
import {failed, loading} from "./Common";

export const register = (username, password, firstName, lastName) => {
    return dispatch => {

        dispatch(loading(true));

        userService.register(username, password, firstName, lastName)
            .then(resp => {
                    dispatch(loading(false));

                    dispatch({
                        type: REGISTER,
                        token: resp.json().token,
                        error: null
                    });
                }
            )
            .catch(err => {
                dispatch(loading(false));
                dispatch(failed(err.message))
            })
    };
};

和 reducer :

1) Common.js:

import {FAILED, LOADING, REGISTER} from "../constants/ActionTypes";

const defaultState = {
    isLoading: false,
    error: null
};

export default function reducer(state = defaultState, action) {
    console.log('COMMON STATE: ', state);
    console.log('COMMON ACTION: ', action);

    switch (action.type) {
        case LOADING:
            return {
                ... state,
                isLoading: action.isLoading
            };
        case FAILED:
            return {
                ... state,
                error: action.error
            };
        default:
            return state;
    }
}

2) Registration.js:

import {FAILED, LOADING, REGISTER} from "../constants/ActionTypes";

const defaultState = {
    isLoggedIn: false,
    token: null
};

export default function reducer(state = defaultState, action) {
    console.log('REGISTER STATE: ', state);
    console.log('REGISTER ACTION: ', action);

    switch (action.type) {
        case REGISTER:
            return Object.assign({}, state, {
                isLoggedIn: action.isLoggedIn,
                token: action.token
            });
        default:
            return state;
    }
}

3) Index.js:

import { combineReducers } from 'redux';
import registration from './Registration';
import login from './Login';
import common from './Common'

const rootReducer = combineReducers({
    registration,
    login,
    common
});

export default rootReducer;

当我第一次单击注册组件上的“注册”按钮时 - 一切正常 - 它会显示一个微调器，然后显示一个警报。

当我第二次(或第三次等)单击“注册”按钮时，它还会显示一个微调器，然后一个接一个地打开两个警报。

我期望的是:每次点击应用程序应该只显示一个警报。

在控制台中我看到以下输出:

10:27:07 PM: REGISTER STATE:  Object {
10:27:07 PM:   "isLoggedIn": false,
10:27:07 PM:   "token": null,
10:27:07 PM: }
10:27:07 PM: REGISTER ACTION:  Object {
10:27:07 PM:   "isLoading": false,
10:27:07 PM:   "type": "LOADING",
10:27:07 PM: }
10:27:07 PM: LOGIN STATE:  Object {
10:27:07 PM:   "isLoggedIn": false,
10:27:07 PM:   "token": null,
10:27:07 PM: }
10:27:07 PM: LOGIN ACTION:  Object {
10:27:07 PM:   "isLoading": false,
10:27:07 PM:   "type": "LOADING",
10:27:07 PM: }
10:27:07 PM: COMMON STATE:  Object {
10:27:07 PM:   "error": "Network request failed",
10:27:07 PM:   "isLoading": true,
10:27:07 PM: }
10:27:07 PM: COMMON ACTION:  Object {
10:27:07 PM:   "isLoading": false,
10:27:07 PM:   "type": "LOADING",
10:27:07 PM: }
10:27:07 PM: REGISTER STATE:  Object {
10:27:07 PM:   "isLoggedIn": false,
10:27:07 PM:   "token": null,
10:27:07 PM: }
10:27:07 PM: REGISTER ACTION:  Object {
10:27:07 PM:   "error": "Network request failed",
10:27:07 PM:   "type": "FAILED",
10:27:07 PM: }
10:27:07 PM: LOGIN STATE:  Object {
10:27:07 PM:   "isLoggedIn": false,
10:27:07 PM:   "token": null,
10:27:07 PM: }
10:27:07 PM: LOGIN ACTION:  Object {
10:27:07 PM:   "error": "Network request failed",
10:27:07 PM:   "type": "FAILED",
10:27:07 PM: }
10:27:07 PM: COMMON STATE:  Object {
10:27:07 PM:   "error": "Network request failed",
10:27:07 PM:   "isLoading": false,
10:27:07 PM: }
10:27:07 PM: COMMON ACTION:  Object {
10:27:07 PM:   "error": "Network request failed",
10:27:07 PM:   "type": "FAILED",
10:27:07 PM: } 

所以 reducer 被调用了两次。如何解决这个问题？或者如何防止打开第二个警报弹出窗口？

更新。

您可以在 GitHub 上找到该项目的源代码:https://github.com/YashchenkoN/money-observer-client

更新 2.从@Chase DeAnda 更改后，它看起来像这样:

Answer 1

在 register 函数中，您需要检查 props 以确定用户是否已经注册:

register(e) {
  e.preventDefault();
  if (!this.props.token) {
    this.props.onRegister(
      this.state.email,
      this.state.password,
      this.state.firstName,
      this.state.lastName
    );
  } else {
    // User already registered
    // Redirect to login page
  }
}

编辑

好的，我想我现在明白问题所在了。您正在使用 componentDidUpdate 生命周期方法。 每次一个状态或 Prop 被传递给它时，这个方法被调用，不一定只有当它们发生变化时。您遇到的问题是您没有检查 this.props.error 是否实际上不同于您已经显示的第一个错误。将其更改为:

componentDidUpdate(prevProps,prevState) {
    if(prevProps.error !== this.props.error && this.props.error){
        setTimeout(() => Alert.alert(this.props.error), 600);
    }
}

由于您有多个 reducer 对失败的 XHR 请求使用react，您的组件将从多个操作中获得传递给它的 Prop 。您需要确保仅在错误与之前传入的错误不同时才显示错误。