Javascript redux thunk：暂停组件执行，直到Action Creator完成

我已经为这个问题挣扎了好几个星期了。我终于认输了，并在这方面寻求帮助，因为我显然做得不对。我有一个React.js应用程序，它使用redux和redux-thunk。我只是试图让我的组件容器启动数据加载，但在数据从提取请求返回之前不进行渲染。看起来很简单，我知道。以下是我所做的：

容器组件

'use strict';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchActivePlayer } from '../actions/index';
import PlayerDetails from '../components/players/player-detail';
import Spinner from '../components/common/spinner/index';
import store from '../store';

export default class PlayerDetailContainer extends Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.props.fetchActivePlayer(this.props.params.player_slug)
    }

    render() {
        if (!this.props.activePlayer.activePlayer) {
            return (
                <Spinner text="Loading..." style="fa fa-spinner fa-spin" />
            );
        }

        return (
            <PlayerDetails 
                player={ this.props.activePlayer.activePlayer } 
            />
        );
    }
}

function mapStateToProps(state) {
    return {
        activePlayer: state.activePlayer
    }
}
export default connect(mapStateToProps, { fetchActivePlayer })(PlayerDetailContainer);

商店

'use strict';
import React from 'react';
import { browserHistory } from 'react-router';
import { createStore, applyMiddleware } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import reducers from './components/reducers/index';

const createStoreWithMiddleware = applyMiddleware(
    thunk,
    promise,
    routerMiddleware(browserHistory)
) (createStore);
export default createStoreWithMiddleware(reducers);

路线

export default (
<Route path="/" component={ App }>
        <IndexRoute component={ HomePage } />
        <Route path="players/:player_slug" component={ PlayerContainer } />
        <Route path="/:player_slug" component={ PlayerContainer } />
    </Route>
);

导出默认值(
);

以下是我在所有方面使用的版本： 反应=0.14.7 react redux=4.4.1 redux thunk=0.5.3

当我运行此操作时，我没有收到任何错误，但很明显，我的操作创建者正在启动，但我的组件容器将继续，而不是等待创建者完成。就像我说的，我肯定我错过了一些非常简单的东西，但我似乎不知道那是什么

先谢谢你。任何帮助都将不胜感激

您在componentWillMount中的操作（获取）是异步的，组件不会等待

通常在获取某些数据时，需要了解获取过程的状态。如“isfetching”以显示加载程序，成功和失败以显示错误

在Action Creator完成之前，您可以使用这些状态不加载/装载/启动组件。

因此，您应该像这样组织您的redux部分：

状态

activePlayer:{
    data:data,
    isFetching: true/false,
    error:""
    }

const initialState = {data:null,isFetching: false,error:null};
export const actionPlayer = (state = initialState, action)=>{
    switch (action.type) {
        case 'FETCH_ACTIVE_PLAYER_REQUEST':
        case 'FETCH_ACTIVE_PLAYER_FAILURE':
        return { ...state, isFetching: action.isFetching, error: action.error };

        case 'FETCH_ACTIVE_PLAYER_SUCCESS':
        return { ...state, data: action.payload, isFetching: action.isFetching,
                 error: null };
        default:return state;

    }
};

行动

export const fetchActivePlayer = slug => dispatch =>{
    dispatch({
        type: 'FETCH_ACTIVE_PLAYER_REQUEST',
        isFetching:true,
        error:null
    });

    return axios.get(`${ROOT_URL}/players/${slug}`)
    .then(response => {
        dispatch({
            type: 'FETCH_ACTIVE_PLAYER_SUCCESS',
            isFetching:false,
            payload: response
        });
    })
    .catch(err => {
        dispatch({
            type: 'FETCH_ACTIVE_PLAYER_FAILURE',
            isFetching:false,
            error:err
        });
        console.error("Failure: ", err);
    });

};

减速器

activePlayer:{
    data:data,
    isFetching: true/false,
    error:""
    }

const initialState = {data:null,isFetching: false,error:null};
export const actionPlayer = (state = initialState, action)=>{
    switch (action.type) {
        case 'FETCH_ACTIVE_PLAYER_REQUEST':
        case 'FETCH_ACTIVE_PLAYER_FAILURE':
        return { ...state, isFetching: action.isFetching, error: action.error };

        case 'FETCH_ACTIVE_PLAYER_SUCCESS':
        return { ...state, data: action.payload, isFetching: action.isFetching,
                 error: null };
        default:return state;

    }
};

那么您的组件可能看起来像这样（硬代码）

类PlayerDetailContainer扩展组件{
组件willmount（）{
this.props.fetchActivePlayer（this.props.params.player\u slug）
}
render（）{
if（this.props.isFetching）{
返回
}else if（this.props.error）{
返回错误{this.props.ERROR}
}否则{
返回
}
}
}
常量mapStateToProps=状态=>({
isFetching:state.activePlayer.isFetching，
数据：state.activePlayer.data，
错误：state.activePlayer.error，
})

---

我不知道你的应用程序看起来怎么样。本例的目的是说明该方法。

您是说您的微调器从未显示？或者只有你的微调器显示？你能在你的问题中包括你的减速器，这样我们就可以看到你的状态形状吗？另外，为了澄清这里的一些语言，你从不暂停组件的执行。这就像是暂停你的大脑。UI就像生命一样是一个恒定的流，你只需要根据当前状态呈现不同的东西。谢谢@azium。我的旋转器确实能显示。我试图让我的组件暂停加载，直到我的数据返回，我现在意识到这是不可能的。我显然误解了react-thunk组件示例。谢谢Utro。我会试试这个，然后再打给你。