Использование axios или асинхронного сетевого вызова в действиях редукса, обновление исходного состояния - PullRequest
Новая
       7

Использование axios или асинхронного сетевого вызова в действиях редукса, обновление исходного состояния

0 голосов
/ 22 сентября 2018

Я занимаюсь разработкой веб-приложения с использованием React + Redux.Сейчас я делаю запрос API с помощью сетевой библиотеки Axios.Я не хочу делать вызов API asyc в компоненте.Как книга, которую я читаю, рекомендуется, я делаю вызов в действиях.

Это мои действия. 

export const EVENT_START_FETCHING_LIST = "(EVENT) request list start";
export const EVENT_COMPLETE_FETCHING_LIST = "(EVENT) request list completed";
export const EVENT_THROW_ERROR_FETCHING_LIST = "(EVENT) request list throw error";
import { getHttpClient } from '../memento/getHttpClient';

export const startFetchingEvents = (data) => {
    return (dispatch) => {
        getHttpClient().get('event/list').then((response) => {
            dispatch(completeFetchingEvents(response.data));
        }).catch((error) => {
            dispatch(throwErrorFetchingEvents({ message: "Error in fetching events from the server", styleClass: "alert alert-danger" }));
        })        
    }
}

export const completeFetchingEvents = (data) => {
    return {
        type : EVENT_COMPLETE_FETCHING_LIST,
        payload : data
    }
}

export const throwErrorFetchingEvents = (data) => {
    return {
        type : EVENT_THROW_ERROR_FETCHING_LIST,
        payload : data
    }
}

Если я хочу сделать вызов, я просто запускаю подобное действие в компоненте. 

 this.props.startFetchingEvents()

ПроблемаУ меня есть то, что обновление состояния.У меня есть собственность в штате, называемая «погрузка».Это мой редуктор. 

import * as EventListActions from '../actions/event.list.actions';

const DEFAULT_STATE = {
    loading: false,
    message: null,
    events: []
}

export default function (state = DEFAULT_STATE, action) {
    switch (action.type) {
        case EventListActions.EVENT_START_FETCHING_LIST:
            {
                //TODO: this event is not triggerd
                return { ...state, loading: true, events: [], message: null };
            }

        case EventListActions.EVENT_COMPLETE_FETCHING_LIST:
            {
                return { ...state, loading: false, events: action.payload };
            }

        case EventListActions.EVENT_THROW_ERROR_FETCHING_LIST:
            {
                return {
                    ...state,
                    loading: false,
                    message: {

                    }
                }
            }
    }
    return state;
}

Как вы можете видеть в моем редукторе, я обновляю значение загрузки до true, когда вызывается API.Но, как я уже говорил, эта функция не срабатывает.Другие функции срабатывают.Что не так с моим кодом и как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 22 сентября 2018

Вы не отправляете тип действия EVENT_START_FETCHING_LIST.Вы можете сделать это так: 

export const startFetchingEvents = (data) => {
    return (dispatch) => {
        dispatch({
          type : EVENT_START_FETCHING_LIST,
        });

        return getHttpClient().get('event/list').then((response) => {
            dispatch(completeFetchingEvents(response.data));
        }).catch((error) => {
            dispatch(throwErrorFetchingEvents({ message: "Error in fetching events from the server", styleClass: "alert alert-danger" }));
        })        
    }
}
0 голосов
/ 22 сентября 2018

Кажется, просто.Вы забыли отправить его ... 

export const startFetchingEvents = (data) => {
    return (dispatch) => {
        dispatch(startFetchingEvents());
        getHttpClient().get('event/list').then((response) => {
            dispatch(completeFetchingEvents(response.data));
        }).catch((error) => {
            dispatch(throwErrorFetchingEvents({ message: "Error in fetching events from the server", styleClass: "alert alert-danger" }));
        })        
    }
} 

const startFetchingEvents = () => {
    return {
        type : EVENT_START_FETCHING_LIST
    }
}
...