Redux и API-запросы - PullRequest
       7

Redux и API-запросы

0 голосов
/ 16 октября 2018

Так что я немного запутался с правильной реализацией Redux в Angular.На данный момент это работает, но это делает запросы API, когда информация уже сохранена.Мне было интересно, если кто-то может указать, где я неправильно понимаю.

Итак, у меня есть мой основной компонент, здесь я вызываю метод (который я храню в своем сервисном файле, который вызовет действие)

main.component.ts

this._service.loadUser(id);

service.ts

loadUser(id: string) {
    return new Promise((resolve, reject) => {
        this.ngRedux.dispatch({ type: 'FETCH_USER_REQUEST', isLoading: true });
        this._http.get('http://localhost:8000/user/' + id).subscribe(res => {
            this.ngRedux.dispatch({ type: 'FETCH_USER_SUCCESS', isFetched: true, user: res, isLoading: false });
            return resolve(res);
        }, error => {
            return reject('Failed to fetch user');
        });
    })
}

Теперь это нормально, когда приложение сначала загружается какв Redux информация не сохраняется, но при повторной загрузке компонента он вызывает API, когда в этом нет необходимости.

user.store.ts

export interface IUserState {
    isLoading: boolean;
    isFetched: boolean;
    error: string;
    user: User;
}

export const USER_INITIAL_STATE: IUserState = {
    isLoading: false,
    isFetched: false,
    error: '',
    User: null
};

function getUser(state, action) {
    return tassign(state, { isFetched: action.isFetched, user: action.user, isLoading: action.isLoading });
}

function getUserError(state, action) {
    return tassign(state, { error: action.error, isLoading: action.isLoading });
}

function requestUser(state, action) {
    return state.isFetched ? tassign(state, { isLoading: false }) :  tassign(state, { isLoading: action.isLoading });
}

export function userReducer(state: IUserState = USER_INITIAL_STATE, action): IUserState {
    switch (action.type) {
        case FETCH_USER_REQUEST:   return requestUser(state, action);
        case FETCH_USER_SUCCESS:   return getUser(state, action);
        case FETCH_USER_ERROR:     return getUserError(state, action);
    }
    return state;
}

У меня такое ощущение, что моя реализация неверна, может кто-то направить меня в правильном направлении.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...