React Native Redux：API調用後不會更新道具

我對React/React Native/Redux很新穎，所以我覺得我做錯了什麼。React Native Redux：API調用後不會更新道具

我想表現出微調而一個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調用結束。我不確定狀態是否正確更新。我不知道在哪一點我可以控制檯登錄。

來源

2017-01-22 stilllife

原來是因爲引號的'TOKEN_GET_FAIL'

這是一個字符串，而不是const我所需要的。所以我改爲TOKEN_GET_FAIL，它的工作原理。

來源

2017-01-22 15:17:51 stilllife

React Native Redux：API調用後不會更新道具

回答

相關問題