Reducer not updating state

Question

I am trying update app state using react-redux but the state is not being updated.

Below is my 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;

Below is my 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);

But as you can see, The state is not being updated in my component, Can someone please tell me where I am going wrong?

Answer 1

Swap the ...state and the rest as follows,

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

The idea of the spread operator is that, it will expand all the properties.

So if the state already has a property called user (say "old_user"), and you write it as follows,

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

Then "some_user" will be replaced by "old_user". But instead you want to override "old_user" with "some_user", therefore, you have to swap it as follows,

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