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

原来是因为'TOKEN_GET_FAIL'中的引号

那是一个字符串，而不是我需要的const 。 因此，我更改为TOKEN_GET_FAIL ，并且可以使用。