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的属性（例如＆＃34; old_user＆＃34;），并按如下所示编写，

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

然后＆＃34; some_user＆＃34;将被＆＃34; old_user＆＃34;取代。但是你想要覆盖＆＃34; old_user＆＃34;因此，使用＆＃34; some_user＆＃34;，您必须按如下方式交换它，

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

Answer 2

一切看起来都不错。我找不到错误。你能仔细检查mapStateToProps

吗？

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

Reducer不更新状态

2 个答案: