title: React Redux action payload data undefined
body: <p>I'm trying to set up authentication for my app. Data is returned by axios and action payload is called correctly. The problem comes when I try to access the data contained in the payload. It returns undefined.</p>
  
  <p>Sign in component with redux-form:</p>
  
  <pre><code>class Signin extends Component {
    submit = values =&gt; {
      this.props.signInAction(values, this.props.history);
    };
  
    errorMessage() {
      if (this.props.errorMessage) {
        return &lt;div className="info-red"&gt;{this.props.errorMessage}&lt;/div&gt;;
      }
    }
  
    render() {
      const { handleSubmit } = this.props;
      return (
        &lt;form onSubmit={handleSubmit(this.submit)} className="formu"&gt;
          &lt;div&gt;
            &lt;div className="inputf"&gt;
              &lt;Field
                name="login"
                component="input"
                type="text"
                placeholder="Username"
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;div className="inputf"&gt;
              &lt;Field
                name="password"
                component="input"
                type="password"
                placeholder="Password"
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;button className="bsignin" type="submit"&gt;
              Sign in
            &lt;/button&gt;
            {this.errorMessage()}
          &lt;/div&gt;
        &lt;/form&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return { errorMessage: state.auth.error };
  }
  
  const reduxFormSignin = reduxForm({
    form: "signin"
  })(Signin);
  
  export default connect(
    mapStateToProps,
    { signInAction }
  )(reduxFormSignin);
  </code></pre>
  
  <p>Action creator</p>
  
  <pre><code>export function signInAction({ login, password }, history) {
    return async dispatch =&gt; {
      try {
        const res = await HTTP.post(`authenticate`, {
          login,
          password
        });
        localStorage.setItem("token", res.data.token);
        const req = await HTTP.get("account");
        dispatch({
          type: AUTHENTICATED,
          payload: req.data
        });
        history.push("/");
      } catch (error) {
        dispatch({
          type: AUTHENTICATION_ERROR,
          payload: "Invalid userName or password"
        });
      }
    };
  }
  </code></pre>
  
  <p>Reducer</p>
  
  <pre><code>import {
    AUTHENTICATED,
    UNAUTHENTICATED,
    AUTHENTICATION_ERROR
  } from "../actions";
  
  const initialState = {
    login: "",
    authority: ""
  };
  
  export default function(state = initialState, action) {
    switch (action.type) {
      case AUTHENTICATED:
        //This console log works and returns the data
        console.log(action.payload);
        //Next console log returns payload is undefined
        //console.log(action.payload.login);
        return {
          ...state,
          authenticated: true,
          // login: action.payload.login,
          // authority: action.payload.authority
        };
      case UNAUTHENTICATED:
        return { ...state, authenticated: false };
      case AUTHENTICATION_ERROR:
        return { ...state, error: action.payload };
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>I'd like to set login and authority with the data comming from the payload but can't access the data inside it. ¿What am I missing?</p>