Не удается получить асинхронный ответ в componentDidMount с Redux

Question

В последнее время я сталкиваюсь с трудной проблемой с React / Redux (Thunk): я правильно создал свой Магазин с Action и Reducer, в моем Компоненте я запускаю функцию Async в методе componentDidMount, чтобы обновить состояние, но состояние, кажется, не меняется, хотя оно изменилось в функциях componentDidUpdate и mapStateToProps! Зачем ? Вот мой код:

export const getAllInterventions = () => {
return dispatch => {
    dispatch(getAllDataStart());
    axios.get('/interventions.json')
        .then(res => {
            dispatch(getAllDataSuccess(res.data));
        })
        .catch(err => {
            dispatch(getAllDataFail(err));
        });
};

Мой редуктор:

case actionTypes.GET_ALL_INTERVENTIONS_SUCCESS:
        return {
            ...state,
            interventions: interventions: action.interventions
        };

Мой компонент:

    componentDidMount() {
    this.props.getAllInterventions();
    console.log('DidMount: ', this.props.inter); /*Empty Array Or Undefined */
}

const mapStateToProps = state => {
console.log('mapStateToProps', state);
return {
    inter: state.interventions,
    error: state.error
};

Answer 1

Я надеюсь, что код может быть полезен для вас

componentWillReceiveProps(nextProps){  
    console.log(nextProps.inter)
}

Answer 2

Ваши действия и изменения состояния являются асинхронными, выполнение console.log сразу после всегда будет возвращаться до того, как эти изменения будут фактически завершены.

Ваше состояние обновляется, поэтому оно работает, когда вы console.log в mapStateToProps.

Я предлагаю настроить redux-devtools, вы сможете легко отслеживать свои действия / состояние.