title: React Redux this.props always return undefined
body: <p>I'm now at React and I'm doing some apps to study, learn more about. Aand right now I'm trying to add the logged user info to redux state, but when I try to check the value of <code>this.props.user</code> my app always returns <code>undefined</code>.</p>
  
  <p>My reducer.js</p>
  
  <pre><code>import { LOG_USER } from '../actions/actions';
  
  let initialState = {
    user: {
      userName: '',
      imageUrl: ''
    }
  }
  
  const userInfo = (state = initialState, action) =&gt; {
    switch (action.type) {
      case LOG_USER:
        return {
          ...state,
          user: action.user
        };
      default:
        return state;
    }
  }
  
  const reducers = userInfo;
  
  export default reducers;
  </code></pre>
  
  <hr>
  
  <p>My actions.js</p>
  
  <pre><code>export const LOG_USER = 'LOG_USER';
  </code></pre>
  
  <hr>
  
  <p>My SignupGoogle.js component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Button from '@material-ui/core/Button';
  import firebase from '../../config/firebase';
  
  import { connect } from 'react-redux'
  import { LOG_USER } from '../../actions/actions';
  
  import './SignupGoogle.css'
  
  class SignupGoogle extends Component {
    constructor(props) {
      super(props);
    }
    signup() {
      let provider = new firebase.auth.GoogleAuthProvider();
      firebase.auth().signInWithPopup(provider).then(function(result) {
        console.log('---------------------- USER before login')
        console.log(this.props.user)
        let user = {
          userName: result.user.providerData[0].displayName,
          imageUrl: result.user.providerData[0].photoURL
        }
        console.log(user)
        this.props.logUser(user)
        console.log('---------------------- USER after login')
        console.log(this.props.user)
      }).catch((error) =&gt; {
        console.log(error.code)
        console.log(error.message)
        console.log(error.email)
      })
    }
    render() {
      return (
        &lt;Button onClick={this.signup} variant="contained" className="btn-google"&gt;
          Sign Up with Google
          &lt;img className='imgGoogle' alt={"google-logo"} src={require("../../assets/img/search.png")} /&gt;
        &lt;/Button&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
      user: state.user
    };
  }
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      logUser: (user) =&gt; dispatch({type: LOG_USER, user: user})
    };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(SignupGoogle);
  </code></pre>
  
  <hr>
  
  <p>And my index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  import { BrowserRouter as Router } from 'react-router-dom';
  import { Provider } from 'react-redux'
  import { createStore } from 'redux';
  import reducers from './reducers/reducers';
  
  const store = createStore(reducers)
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;Router&gt;
        &lt;App /&gt;
      &lt;/Router&gt;
    &lt;/Provider&gt;,
    document.getElementById('root')
  );
  
  serviceWorker.unregister();
  </code></pre>
  
  <p>This is what I can get at my browser log after login with Google firebase:</p>
  
  <p><a href="https://i.stack.imgur.com/MRw35.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MRw35.png" alt="console.log after login with Google firebase"></a></p>