2017-02-12 4 views
0

У меня проблема с state в моем компоненте. Я пытаюсь получить статус моего редуктора, но state пуста просто получить undefinedПустое состояние в компоненте (реакция redux)

Вот мой actionCreator

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

Мой редуктор

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

А вот мой компонент, где я пытаюсь получить состояние

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) 

Мне нужно получить status от государства

Компонента

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 {} 
+1

когда вы передаете состояние компонентного реквизита с 'mapStateToProps', он должен быть доступен через реквизит компонент. Вы пытаетесь получить доступ к 'this.props.status'? Вы должны показать полный компонент, чтобы люди могли понять вашу проблему. –

+0

yeah Я пытаюсь получить данные из 'this.props.status' и получаю' undefined' Я понятия не имею, почему так происходит –

+1

может быть несколько причин, трудно сказать? включили ли вы редуктор в функцию 'combReducers'? Вы соответствуете любым случаям в вашем редукторе? –

ответ

1

Вы не можете получить доступ к реквизиту, которые асинхронно внутри constructor. Поскольку constructor будет выполняться только один раз, когда вы создаете экземпляр своего компонента. Когда вы создаете экземпляр своего компонента, ваш асинхронный вызов еще не ответил, поэтому this.props.status не определен.

Вы можете использовать componentWillReceiveProps от React методы жизненного цикла, например:

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

Этот метод будет выполняться каждый раз, когда опора подключена, или передается, в компонент изменится. Вы также можете использовать this.props.status внутри render, так как он также выполняется каждый раз, когда опора изменена.

Для лучшего понимания реакции жизненного цикла вы могли бы взглянуть на различные методах доступны, здесь: https://facebook.github.io/react/docs/react-component.html

Смежные вопросы