Empty state in component ( react redux )

Question

Have problem with state in my component. I'm trying to get status from my reducer but state is empty just getting undefined

Here is my actionCreator

export function checkLogin() {
return function(dispatch){
    return sessionApi.authCheck().then(response => {
        dispatch(authSuccess(true)); 
    }).catch(error => {
        throw(error)
    })
 }
}

My reducer

export const authStatus = (state = {}, action) => {
switch(action.type){
    case AUTH_FALSE:
            return{
                status: action.status
            }
    case AUTH_TRUE:
            return {
                ...state,
                status: action.status
            };
    default:
        return state;
  }
};

And here is my component where i'm trying to get state

const mapStateToProps = (state) => {
 return {
 status: state.status
  }
};

const mapDispatchToProps = (dispatch:any) => {
  const changeLanguage = (lang:string) => dispatch(setLocale(lang));
  const checkAuth = () => dispatch(checkLogin());
  return { changeLanguage, checkAuth }
};

@connect(mapStateToProps, mapDispatchToProps)

I need to get status from the state

Component

import * as React from "react";
import  Navigation  from './components/navigation';
import { connect } from 'react-redux';
import { setLocale } from 'react-redux-i18n';
import cookie from 'react-cookie';
import {checkLogin} from "./redux/actions/sessionActions";

class App extends React.Component<any, any> {
  constructor(props:any) {
    super(props);
    this.state = {
      path: this.props.location.pathname
    };
  }
  componentDidMount(){
    this.props.checkAuth();
    this.props.changeLanguage(cookie.load('lang'));
  }
  componentWillUpdate(){
  }

  render() {
    return (
      <div>
        <Navigation path={this.state.path} />
          {this.props.children}
      </div>
    )
  }

}
const mapStateToProps = (state) => {
  return {
    status: state.status
  }
};

const mapDispatchToProps = (dispatch:any) => {
  const changeLanguage = (lang:string) => dispatch(setLocale(lang));
  const checkAuth = () => dispatch(checkLogin());
  return { changeLanguage, checkAuth }
};

@connect(mapStateToProps, mapDispatchToProps)
export class Myapp
extends App {}

Answer 1

You cannot access props that are asynchronous inside of the constructor . As the constructor will be executed only once, when you instantiate your component. When you instantiate your component your asynchronous call has not responded yet, therefore this.props.status is undefined.

You could use componentWillReceiveProps from React lifecycle methods for example:

componentWillReceiveProps(nextProps) {
  console.log(nextProps.status);
}

This method will be executed everytime a prop connected, or passed, to the component will change. You could also use this.props.status inside of the render as this one is also executed everytime a prop changed.

For a better understanding of react lifecycle you could have the look at the different methods available, here : https://facebook.github.io/react/docs/react-component.html