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

实际行为是 props 没有改变，并且没有消息或微调器是可见的。通过一些控制台日志，我知道 API 调用由于超时而结束。我不确定状态是否得到正确更新。我不知道在什么时候我可以控制台记录这个。

Answer 1

原来是因为'TOKEN_GET_FAIL'

中的引号

那是一个字符串，而不是我需要的 const。所以我改为 TOKEN_GET_FAIL 并且有效。

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

React Native Redux: props not updating after API call

android

react-native

react-redux