Как организовать получение данных из api если данных нет в store?

Question

[markmoskalenko]

Добрый день!
У меня есть app в котором на главной грузятся некоторые данные из api. При клике на item я перехожу на страницу item view. Пока это делается в таком порядке все ок. В item view я получаю из store элемент. Но если я перезагружу страницу (f5), то в store будет пусто и я не смогу вывести данные нужного item. Как же мне проверять есть ли данные в store и если нет записывать данные туда. Конечно можно в компоненте .. но может можно как-то автоматизировать это в effect или еще где? Подскажите пожалуйста как это красиво решить.

Comments

[vasIvas]

как Вы вообще пишите на angular если не знаете как сделать какую фигню?

[markmoskalenko]

vasIvas, все мы рано или поздно учимся. Я достаточно хорошо знаком с Angular 1. Сейчас потребовался Angular 4 + ngrx. Лучше помогите, а не осуждайте.

[vasIvas]

markmoskalenko, дело в том что у Вас вопрос не относится ни к одному из фраймворков.
к тому же он вообще глуп. Как вот вы думаете если нет данных, то что нужно сделать? Варианты ответов -
а) Положить их в стор
б) Позвать на помощь Гендельфа

Да и помочь я не могу, я не пишу в связке с ngrx.

[Ptolemy_master]

vasIvas, зачем тогда вы оскорбляете человека, вам больше делать нечего? Вы добьетесь только одного - он больше сюда не придет.

[Ptolemy_master]

Я не знаю ангуляр 4, но вы явно храните данные где-то не там. Если не хотите каждый раз при загрузке страницы дергать api, то можно попробовать:
- хранить данные в local store браузера
- хранить данные на сервере, для начала достаточно будет организоваться просто хранилище (просто массив объектов), или используйте хранилища в памяти вроде redis.

[ой всё]

vasIvas, вот так и пишут, потому что в вакансиях написано ангуляр

[ой всё]

Ptolemy_master, может ему так будет и лучше
займется делом наконец

[ой всё]

markmoskalenko, если бы вы вообще хоть что-то знали, вы бы не задавали таких вопросов

[Федор Сазонов]

покажите роутинг, и каким образом у вас происходит линк из item в item view

[markmoskalenko]

Я так понял по комментам что вы не понимаете как минимум о чем идет речь. Если бы это был не ngrx тогда и вопроса не было бы.

Начну сначала.
Component

import {Component, OnInit} from '@angular/core';
import {Store} from '@ngrx/store';

import * as fromRoot from '../../common/index';
import * as geoObjectActions from '../../common/geo-object/actions';
import {Observable} from "rxjs/Rx";
import {TranslateService, LangChangeEvent} from "@ngx-translate/core";

@Component({
  selector: 'app-catalog-list-geo',
  templateUrl: './catalog-list-geo.component.html',
})

export class CatalogListGeoComponent implements OnInit {
  public list$:Observable<any>;
  public offset$:Observable<any>;
  private offset:number;
  private startDataLoaded: boolean = false;

  constructor(private store:Store<fromRoot.AppState>, private translate:TranslateService) {
    this.list$ = store.select(fromRoot.getGeoObjectEntitiesArray);
    this.offset$ = store.select(fromRoot.getGeoObjectOffset);
    this.offset$.subscribe(offset => this.offset = offset);
    this.list$.subscribe(()=>this.startDataLoaded = true);
    this.list$.subscribe((items)=>console.log('items', items));
  }

  partialLoad() {
    this.store.dispatch(new geoObjectActions.LoadPartialStartAction(this.offset));
  }

  loadStartData() {
    this.store.dispatch(new geoObjectActions.LoadInitStartAction())
  }

  ngOnInit() {
    console.log('init');
    this.translate.onLangChange
      .subscribe((event:LangChangeEvent) => {
        if (this.startDataLoaded) this.loadStartData();
      });

    if (!this.startDataLoaded) {
      this.loadStartData();
    }
  }
}

Actions

import {Action} from "@ngrx/store";

export const LOAD_INIT_START = '[PLACE OBJECT] load init data start';
export const LOAD_INIT_SUCCESS = '[PLACE OBJECT] successfully load init data';
export const LOAD_PARTIAL_START = '[PLACE OBJECT] load partial data start';
export const LOAD_PARTIAL_SUCCESS = '[PLACE OBJECT] successfully load partial data';
export const LOAD_FAILURE = '[PLACE OBJECT] failed to load';

export class LoadInitStartAction implements Action {
  readonly type = LOAD_INIT_START;

  constructor() {
  }
}

export class LoadInitSuccessAction implements Action {
  readonly type = LOAD_INIT_SUCCESS;

  constructor(public payload) {
  }
}


export class LoadPartialStartAction implements Action {
  readonly type = LOAD_PARTIAL_START;

  constructor(public payload:any) {
  }
}

export class LoadPartialSuccessAction implements Action {
  readonly type = LOAD_PARTIAL_SUCCESS;

  constructor(public payload:any) {
  }
}

export class LoadFailedAction implements Action {
  readonly type = LOAD_FAILURE;

  constructor() {
  }
}

export type Actions
  = LoadPartialStartAction
  | LoadPartialSuccessAction
  | LoadInitStartAction
  | LoadInitSuccessAction
  | LoadFailedAction

Effects

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/switchMap';
import {Observable} from 'rxjs/Observable';
import {Injectable} from "@angular/core";
import * as objectActions from "./actions";
import {Action} from '@ngrx/store';
import {Actions, Effect} from '@ngrx/effects';
import {GeoObjectService} from "../services/geo-object.service";
import {of} from 'rxjs/observable/of';

@Injectable()
export class PlaceObjectEffects {
  @Effect() load$:Observable<Action> = this.actions$
    .ofType<objectActions.LoadPartialStartAction>(objectActions.LOAD_PARTIAL_START)
    .map(action => action.payload)
    .switchMap(offset => {
        return this
          .service$
          .findAll(offset, 'place')
          .map(result => new objectActions.LoadPartialSuccessAction(result))
          .catch(() =>of(new objectActions.LoadFailedAction()))
      }
    );

  @Effect() loadInit$:Observable<Action> = this.actions$
    .ofType<objectActions.LoadInitStartAction>(objectActions.LOAD_INIT_START)
    // .map(action => action.payload)
    .switchMap(() => {
        return this
          .service$
          .findAll(0, 'place')
          .map(result => new objectActions.LoadInitSuccessAction(result))
          .catch(() =>of(new objectActions.LoadFailedAction()))
      }
    );

  constructor(private actions$:Actions,
              private service$:GeoObjectService) {
  }
}

Reducer

import * as objectActions from './actions';

export interface State {
  loaded:boolean;
  loading:boolean;
  totalCount:number,
  offset:number,
  entities:Array<any>;
}

const initialState:State = {
  loaded: false,
  loading: false,
  totalCount: 0,
  offset: 0,
  entities: []
};

export function reducer(state = initialState, action:objectActions.Actions):State {
  switch (action.type) {
    case objectActions.LOAD_INIT_START: {
      return Object.assign({}, state, {
        loading: true,
      });
    }

    case objectActions.LOAD_INIT_SUCCESS: {
      let payload = action.payload;
      let headers = payload.headers;
      let data = payload.json();
      let totalCount = +headers.get('x-pagination-total-count');

      return Object.assign({}, state, {
        entities: data,
        loaded: true,
        loading: false,
        totalCount: totalCount,
        offset: state.offset + data.length
      });
    }

    case objectActions.LOAD_PARTIAL_START: {
      return Object.assign({}, state, {
        loading: true,
      });
    }

    case objectActions.LOAD_PARTIAL_SUCCESS: {
      let payload = action.payload;
      let headers = payload.headers;
      let data = payload.json();
      let totalCount = +headers.get('x-pagination-total-count');

      console.log(action);
      return Object.assign({}, state, {
        entities: [...state.entities, ...data],
        loaded: true,
        loading: false,
        totalCount: totalCount,
        offset: state.offset + data.length
      });
    }

    case objectActions.LOAD_FAILURE: {
      return Object.assign({}, state, {});
    }
    default:
      return state;
  }
}

export const getEntities = (state:State) => state.entities;
export const getOffset = (state:State) => state.offset;

Service

import {Injectable} from '@angular/core';
import {ApiService} from "./api.service";
import 'rxjs/add/operator/map';

@Injectable()
export class GeoObjectService extends ApiService {
  public findAll(offset, type) {
    return this
      .http
      .get(this.getApiUrl('objects'), {
        search: {
          offset: offset,

          count: 6,
          expand: 'additional_fields,gallopgeo:name_lang,gallopgeo:main_image',
          sort: '-rating',
          types: '["' + type + '"]'
        }
      });
  }
}

Теперь я думаю будет понятнее вопрос.

[vasIvas]

markmoskalenko, лично мне все равно не понятно, но давайте вот так..
Предположим, на главной Вы загрузили массив с данными, которые отображаются в виде списка.
При нажатии на item Вы запускаете динамический роутер, который формируется на основе данных
конкретного item. Когда создается компонент этого роута, ему передаются параметры идентифицирующие данные,которые он должен отображать. Он по id запрашивает данные у стора, который возвращает Observable, который компонент и отображает. Если у стора уже есть данные, то он их и вернет, если нет, то он их загрузит и вернет.

[markmoskalenko]

vasIvas, Вот Вы и подошли к основной проблеме. Он не загрузит автоматически, он просто вернет Observable. Для загрузки данных вызывается отдельный метод. У меня и вопрос к тем кто работал с ngrx/redux где правильно организовать проверку данных в сторе. Может из коробки это решается красиво.

[vasIvas]

markmoskalenko, я говорил что не работал в связке ngrx. Могу только гадать.
Если в ngrx стор наполняется данными из action, то значит, как минимум, должно быть событие
выполняющий этот action. Получается что в компоненте динамического роута можно получить стор,
получить его Observable, затем послать событие которое запустит action, который загрузит данные, а потом положит в стор, который пошлет событие обновления, по которому компонент получит данные и отобразит их.

получается что сработал роут и по id из query посылается событие, которое вызывает нужный action, который даже не будет грузить все данные, а загрузит только нужные, затем отправит из в стор.

Но это если я правильно понимаю, как в ngrx устроена работа.

[vasIvas]

markmoskalenko, ошибся в терминах. Не action, а actionCreator. Если таких нет, то значит как-то по другому должны называться.

[vasIvas]

Ну а проверку данных.. Если Вы хотите класть в стор уже проверенные, то это в actionCreator.
В редюсере по идее, только модифицируют состояние, типа есть массив с данными user и вот редусер может пройтись по всему массиву и выдать только имена. То есть редюсеры взаимодействуют-создают состояние которое получают из хранилищ. Но если данные в хранилище нужно хранить в чистом виде, то тогда вклиниваться в rxjs и перед получением состояния проверять их прямо в компоненте.

[markmoskalenko]

Ребята, прошу написать того кто работал с ngrx. Теории у меня хоть отбавляй, а вот кто сможет показать как это сделать с ngrx я буду очень благодарен.

[vasIvas]

markmoskalenko, понимаю. Удалите эту тему и создайте новую, чтобы её заметили. Только на этот раз подробней объясните.

Answer 1

[Василий Мажекин]

Проблема очень простая, сделайте вызов dispatch (получения данных) не на главной странице, а в компоненте который является парентом (роуты нужно прописать соответсвенно), всех страниц это типа того что в index.html прописан. Если нужно для только для страниц какого то раздела, то в паренте всего этого раздела.

Смысл в том, что попадая любым способом на любую страницу с парентом(и там вызов), этот вызов совершится один раз, и потом переходя по дочерним роутам он не будет больше вызываться