Так что я немного запутался с правильной реализацией 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;
}
У меня такое ощущение, что моя реализация неверна, может кто-то направить меня в правильном направлении.