React Native Redux：API呼び出し後に小道具が更新されない

Question

React/React Native/Reduxの新機能ですので、間違っていると感じています。

問題

私はAPIを呼び出すと、エラーメッセージが一度、このAPI呼び出しが失敗している間に、スピナーを示したいと思います。小道具は更新されず、従って成分は、所望のメッセージまたはスピナー

コード（のみ関連チャンク）

成分

class Home extends Component { 

    componentWillMount() { 
     this.props.tokenGet(); 
    } 

    renderSpinner() { 
     if (this.props.loading) { 
      return (
       <Spinner size="large" /> 
      ); 
     } 
     return null; 
    } 

    renderMessage() { 
     if (this.props.message) { 
      return (
       <Text style={{flex: 1, background: red, color: black}}> 
        { this.props.message } 
       </Text> 
      ) 
     } 
     return null; 
    } 

    render() { 
     return (
      { this.renderSpinner() } 
      { this.renderMessage() } 
     ) 
    } 
} 


const mapStateToProps = (state) => { 
    const { auth } = state; 
    const { 
     loading, 
     token, 
     message 
    } = auth || { 
     loading: false, 
     token: null, 
     message: null 
    }; 
    return { 
     loading, 
     token, 
     message 
    } 
}; 


export default connect(mapStateToProps, { tokenGet })(Home); 

作用を示しません作成者

export const tokenGet =() => { 
    return (dispatch) => { 
     dispatch({ type: 'TOKEN_GET_START'}); 

     // Perform the actual API call 
     let requestToken = fetch(apiBaseUrl + "/tokens", { 
      method: "POST", 
      headers: { 
        'Accept': 'application/json', 
        'Content-Type': 'application/json' 
      }, 
      body: JSON.stringify(.....) 
     }); 
     Promise 
      .race([timeout, requestToken]) 
      .then((response) => response.json()) 
      .then((responseJson) => { 
        ... not relevant ... 
      }) 
      .catch((error) => { 
       dispatch({ type: 'TOKEN_GET_FAIL', payload: error}); 
      }); 

サーバが

let timeout = new Promise((resolve, reject) => { 
    setTimeout(reject, 2000, 'Request timed out. Please check your internet connection.'); 
}); 

減速

import { 
    TOKEN_GET_START, 
    TOKEN_GET_SUCCESS, 
    TOKEN_GET_FAIL 
} from '../actions/types'; 

const INITIAL_STATE = { 
    loading: false, 
    token: null, 
    message: null 
}; 

export default (state = INITIAL_STATE, action) => { 
    switch (action.type) { 
     case TOKEN_GET_START: 
      return { ...state, loading: true }; 
     case TOKEN_GET_SUCCESS: 
      return { ...state, loading: false, token: action.payload }; 
     case TOKEN_GET_FAIL: 
      return { ...state, loading: false, message: action.payload }; 
     default: 
      return state; 
    } 
}; 

を応答に失敗したときに組み合わせるレデューサーは、実際の行動がある

import { combineReducers } from 'redux'; 
import AuthReducer from './AuthReducer'; 

export default combineReducers({ 
    auth: AuthReducer 
}); 

呼び出されるタイムアウト機能、小道具は変わらないメッセージやスピナーは表示されません。一部のコンソールログでは、タイムアウトが原因でAPIコールが終了することがわかりました。状態が正しく更新されるかどうかはわかりません。どの時点でログを記録できるのか分かりません。

Answer 1

それはので、文字列ではなく、私が必要constある'TOKEN_GET_FAIL'

で引用符であることが判明。だから私はTOKEN_GET_FAILに変更して動作します。