CODEWITHSUNDEEP
javascriptreactjsredux
Wouter
Wouter

Reputation: 437

Not rendering this.props in render - react redux

I am try to create my react app. in the basic I make A Auth page with login by passport.js and express. I tried everything to display the user mailadres, but nothing seems to work. this.props.email

Header.jsx

import React, {
  Component,
  PropTypes
} from 'react';
import {
  connect
} from 'react-redux';
import * as actions from '../../reducers/auth/actions';
class Header extends Component {
  constructor(props) {
    super(props);
    this.props.getprofile();
  }
  componentDidMount() {


  }
  Logout() {
    this.props.signoutUser();
  }
  render() {
    {
      <div>
      {this.props.username.emal}
    </div>
  );
}
};

function mapStateToProps(state) {
  return {
    username: state.auth.user
  };
}
export default connect(mapStateToProps, actions)(Header);

My action file 

import {
  push
} from 'react-router-redux'
import {
  AUTH_USER,
  AUTH_ERROR,
  UNAUTH_USER,
  AUTH_USER_PROFILE
} from './types';
const jwt_decode = require('jwt-decode');

export function getprofile() {
  return dispatch => {
    return fetch('/user', {
        method: 'get',
        headers: {
          "Content-Type": "application/json",
          authorization: localStorage.getItem('token')
        }
      }).then(handleResponse)
      .then(data => {
        dispatch({
          type: AUTH_USER_PROFILE,
          user: data
        });
        return true;
      }).catch(err =>
        dispatch(authError("Foutieve values")));
  }
}

And last item is my reducer file

import {
  AUTH_USER,
  AUTH_ERROR,
  UNAUTH_USER,
  AUTH_USER_PROFILE
} from './types';


export default function auth (state = {
  authenticated: false,
  admin_privileges: false,
  user: []
}, action) {
  switch (action.type) {
    case AUTH_USER_PROFILE:
      return { ...state,
        error: '',
        user: action.user.user,
        authenticated: true
      };

  }

      return state;
}

Sorry for alle the code, but I think you need to see all to help me out.

Upvotes: 0

Views: 276

Answers (1)

Max Millington
Max Millington

Reputation: 4498

in this.props.username.emal 'email' is spelled wrong.

Also, this.props.getprofile() should be in componentDidMount(), not in the constructor, per the docs

https://facebook.github.io/react/docs/react-component.html

Upvotes: 1

Related Questions