Ionic - правильный способ хранить и отображать одну и ту же информацию на разных экранах

Question

Я новичок в разработке мобильных приложений.

Итак, мое приложение Ionic 4 работает хорошо, но я немного запутался в хранении и отображении данных.

В основном, когдаоткройте приложение, я запрашиваю всю информацию о приложении и пользователе из API.

Это работает, и я храню в NativeStorage.

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

Должен ли я читать NativeStorage на каждой странице ionViewWillEnter?

Или, может быть, мне следует читать хранилище из user.serviceи хранить информацию в этом сервисе?

Как правильно это сделать?

Answer 1

@ Шайлеш имеет правильный ответ. Другой метод (для более крупных проектов - где управление данными более сложное) - использовать шаблон Redux.

Если вы используете ionic с angular, тогда ищите ngrx, если используете ionic wityh реакции, используйте Redux.

Я думаю, что лучше попробовать использовать сервисы с наблюдаемыми из (RxJs), которые @ShaileshBhokare упоминают как новичка, или если ваш проект не требует сложного управления данными, потому что шаблон Redux сложен для понимания.

Чтобы использовать со службами, посмотрите на мой пример (sample-data-service.service.ts):

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SampleDataServiceService {

  sampleData1: string[]; // in a component, you wil not know if this data changed

  sampleData2Behaviour =  new BehaviorSubject([]);
  sampleData2: string[];

  constructor() {
    this.initializeDataFromDatabase();
  }

  initializeDataFromDatabase() {
    this.sampleData1 = ['a', 'b'];
    this.sampleData2 = ['x', 'y'];
    this.sampleData2Behaviour.next(this.sampleData2);
    // need to subscribe to thisSubjectBehaiour if you want to get changes (INPORTANT: Don't forget to unsubscribe) 
    // at the start of any component where you want to use this data, you could use sampleData2Behaviour.getValue();
  }

  changeSampleData1(someParam: string) {
    //do what you need
  }
  changeSampleData2(someParam: string) {
    //do what you need to change sampleData2
    this.sampleData2Behaviour.next(this.sampleData2)
  }


}

В компоненте:

    constructor (private sampleDataService: SampleDataService){}

        ngOnInit() {
            // subscribe to get notified when data changes
            this.sampleDataService.sampleData2Behaviour.subscribe(
              sampleDataFromService => this.inComponentSampleData = [...sampleDataFromService] // because it is an array in this case
            );

            // to get the data initially, because data initially will be retrieved in the service before you subscribe to the behaviour
            this.inComponentSampleData = this.sampleDataService.sampleData2Behaviour.getValue();
          }
ngOnDestroy(){
this.sampleData2Behaviour.unSubscribe();
}

Answer 2

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

Каждый раз вызывать хранилище не очень хорошая идея.

Счастливое кодирование: -)