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并且它有效。

React Native Redux：在API调用后不更新道具

1 个答案: