javascript - Reducer 不更新状态

Question

我正在尝试使用 react-redux 更新应用程序状态，但状态未更新。

下面是我的reducers.js:

import * as Actions from '../actions/index';

const initialState = {
  user: {},
  authSuccess: false,
  authError: {},
};

function Auth(state = initialState , action) {
    switch(action.type) {
      case Actions.SIGN_UP_SUCCESS:
           console.log(action.user); // Is being logged and its not undefined
          return {
              user: action.user,
              authSuccess: true,
              ...state
          };
      case Actions.AUTHENTICATION_FAILED:
          console.log(action.error); // Is being logged and its not undefined
          return {
              authError: action.error,
              ...state
          };
      case Actions.LOGIN_SUCCESS:
          console.log(action.user); // Is being logged and its not undefined
          return {
              user: action.user,
              authSuccess: true,
              ...state
          };
      default:
          return state;
  }
}

export default Auth;

下面是我的login.js:

import React, { Component } from 'react';
import {Text, View, StyleSheet, ImageBackground, Image, TextInput} from 'react-native';
import { Button } from 'react-native-elements'
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as Actions from '../actions/index';
import { styles } from './SignUp';

const textInputConfig = {
  placeholderTextColor : '#838383',
}


function mapStateToProps(state) {
    return {
      user: state.user,
      authSuccess: state.authSuccess,
      authError: state.authError,
    };
}

function mapDispatchToProps(dispatch){
  return bindActionCreators(Actions, dispatch);
}

class Login extends Component {

  constructor(props){
    super(props);
    this.state = {
      email: '',
      password: '',
    };
  }

  static navigationOptions = {
      header: null,
  };


  login = () => {
      let user = {
         email: this.state.email,
         password: this.state.password,
      };
      this.props.login(user);
  };


  render() {
    console.log(this.props.authError.user +" "+this.props.authSuccess);// Always undefined and false, even after the actions are dispatched.
    return (
      <View style={styles.container}>
        <ImageBackground source={require('../resources/images/background_image.png')} style={styles.backgroundImage} >
            <Image source={require('../resources/images/app_logo.png')} style={styles.logo}/>
              <View style={styles.formContainer}>
                  <TextInput style={styles.textInput} placeholder='Email'
                      placeholderTextColor={textInputConfig.placeholderTextColor} onChangeText={(text) => this.setState({email:text})} autoCapitalize='none'/>
                  <TextInput style={styles.textInput} placeholder='Password'
                      secureTextEntry={true} placeholderTextColor={textInputConfig.placeholderTextColor} onChangeText={(text) => this.setState({password:text})} autoCapitalize='none'/>
                  <Button raised title='LOG IN' buttonStyle={styles.signupButton}
                      containerViewStyle={styles.signupButtonContainer} onPress={this.login} />
             </View>
        </ImageBackground>
      </View>
    );
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(Login);

但如您所见，状态未在我的组件中更新，有人可以告诉我哪里出错了吗？

Answer 1

如下交换...状态和其余状态，

return {
    ...state
    user: action.user,
    authSuccess: true
};

扩展运算符的思想是，它将扩展所有属性。

因此，如果状态已经有一个名为 user 的属性(比如“old_user”)，并且您将其编写如下，

return {
    user: "some_user",
    ...state
}

然后“some_user”将被“old_user”替换。但是你想用“some_user”覆盖“old_user”，因此，你必须按如下方式交换它，

return {
    ...state,
    user: "some_user"
}