Empty Zustand in der Komponente (react redux)

Question

Haben Sie ein Problem mit state in meiner Komponente. Ich versuche Status von meinem Minderer zu bekommen, aber state leer ist nur undefined

bekommen Hier ist meine actionCreator

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

Mein Minderer

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; 
    } 
}; 

Und hier ist mein Komponente, wo ich versuche, Zustand

012 zu bekommen

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) 

brauche ich status vom Staat

Komponente

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

Sie Requisiten zugreifen können nicht erhalten, die innerhalb des constructor asynchron sind. Da die constructor nur einmal ausgeführt wird, wenn Sie Ihre Komponente instanziieren. Wenn Sie Ihre Komponente instanziieren, hat Ihr asynchroner Aufruf noch nicht geantwortet, daher ist this.props.status nicht definiert.

könnten Sie componentWillReceiveProps verwenden, um von React-Lifecycle-Methoden zum Beispiel:

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

Diese Methode ausgeführt wird jedes Mal eine Stütze verbunden ist, oder übergeben, um die Komponente zu ändern. Sie könnten auch this.props.status innerhalb der render verwenden, da diese auch jedes Mal ausgeführt wird, wenn sich eine Stütze ändert.

Zum besseren Verständnis von reagieren Lifecycle Sie den Blick auf die verschiedenen Methoden zur Verfügung, hier haben könnte: https://facebook.github.io/react/docs/react-component.html